欢迎光临
我的个人博客网站

百度地图API——多点路径连线问题

本文系作者 chaoCode原创,转载请私信并在文章开头附带作者和原文地址链接。

违者,作者保留追究权利。

前言

本文是对于在项目应用有遇到的多点连线问题,我的一些解决方式,以及对于之前所学习的一些百度地图API基本使用的一个小结。
如果有小伙伴没有看过之前的百度地图API基本使用(一)|8月更文挑战百度地图API基本使用(二)|8月更文挑战百度地图API基本使用(三),可以先去观看一下,前期所需要的一些准备,以及一些基本的用法。

感兴趣的小伙伴可以自行查看百度地图官方提供的文档
百度地图开放平台开发文档中的JavaScript API

也可以通过下方示例中心更直观的看到百度地图API的一些使用,以及它的一些特性
百度地图开放平台-示例中心

想深入研究百度地图avaScript API 3.0方法参数信息的话,可以通过下方类参考
百度地图avaScript API v3.0类参考
另外不同版本的API可以自行在开发文档中的类参考类目中找到,请自行查找

百度地图API——多点路径连线问题

应用场景:

简单来说就是点覆盖物需要自定义图片,以及实现点击点覆盖物实现多点路径连线并且添加顺序编号。以及将这些数据返回到后端入库。以及根据后端数据进行回显操作

好的根据我所描述的这个需求,我们就可以回想之前学习的百度地图API,有哪些在这里是我们所需要的。
1.百度地图API基本使用(一)|8月更文挑战中的创建加载地图。
2.百度地图API基本使用(二)|8月更文挑战中的创建点覆盖物,点覆盖单击事件。
3.百度地图API基本使用(三)中的路线规划模块中讲的一些连线操作

回想了一下我们所需要的知识点,那么我们开始进入实操阶段。

1.创建和加载地图。

var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.399, 39.910), 15); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.NavigationControl()); 

2.举个例子随便给了4个点,然后这个时候需要修改点覆盖物的图片,并添加点击事件。
3.由于我们是要通过点击点覆盖物去实现,路线规划陆续连接起来,所以讲路线规划放在了点击事件中。本次使用的是
WalkingRoute,也就是步行路线规划导航实例。

目前这个还有一些纰漏,简单的实现,如果小伙伴们有更好的方案,可以评论区交流学习。

var PonitData = [ [116.404, 39.94],[116.404, 39.95],[116.404, 39.96],[116.404, 39.97]]; //总的点击点覆盖集合 var plan_points=[]; //两个点连线的集合,每次连完线之后,留下后一个 var points =[]; //使用each去循环渲染点覆盖物 $.each(PonitData, function (item, value) {     var point =new BMap.Point(value[0], value[1]);     //自定义图片var myIcon = new BMap.Icon(图片路径, new BMap.Size(23, 25), {});     var myIcon = new BMap.Icon("images/marker.png", new BMap.Size(23, 25), {         // 指定定位位置。         // 当标注显示在地图上时,其所指向的地理位置距离图标左上         // 角各偏移10像素和25像素。您可以看到在本例中该位置即是         // 图标中央下端的尖角位置。         //anchor: new BMap.Size(23, 25),         // 设置图片偏移。         // 当您需要从一幅较大的图片中截取某部分作为标注图标时,您         // 需要指定大图的偏移位置,此做法与css sprites技术类似。         //imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移     });     // 创建标注对象并添加到地图     var marker = new BMap.Marker(point);     marker.setIcon(myIcon);     map.addOverlay(marker);      //给点覆盖物添加点击事件     marker.addEventListener("click", function (e)     {         var planPointFlage=false;         if (plan_points.length>0){             $.each(plan_points, function (item, value) {                 console.log(value);                 if (value.lng==point.lng && value.lat==point.lat){                     planPointFlage = true;                     planPonitIndex=item;                 }             });         }         var pointFlage=false;         if (points.length>0) {             $.each(points, function (item, value) {                 if (value.lng == point.lng && value.lat == point.lat) {                     pointFlage = true;                 }             });         }         if(!planPointFlage){             plan_points.push(point);             if(!pointFlage){                 points.push(point);             }             //点击点的时候获取点在数组中所在的位置             var planPonitIndex=-1;             if (plan_points.length>0){                 $.each(plan_points, function (item, value) {                     if (value.lng==point.lng && value.lat==point.lat){                         planPonitIndex=item;                     }                 });             }             //配置label显示为该点覆盖物在数组中的下标+1,表示这个点是第几个,以及点坐标,字的位置。             var lab1 = new BMap.Label(planPonitIndex + 1, { position: point, offset: new BMap.Size(-7, -12) });             //配置label的一些样式             lab1.setStyle({                 color: "#fff",                 fontSize: "16px",                 backgroundColor: "0.05",                 border: "0",                 fontWeight: "bold"             });             marker.setLabel(lab1);             map.addOverlay(marker);             //禁用自动调整地图层级             walking.disableAutoViewport();             var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } });             if (points.length === 2) {                 var start =points[0];                 var end = points[1];                 //设置自定义图片,覆盖掉路线规划的时候的起点和重点图片,使用的是和点覆盖物一样的图片                 var startIcon = new BMap.Icon("images/marker.png", new BMap.Size(23, 25));                 walking.setMarkersSetCallback(function(result){                     //覆盖起点的图片                     result[0].marker.setIcon(startIcon);                     //覆盖终点                     result[1].marker.setIcon(startIcon);                 });                 //发起检索                 walking.search(start, end);                 //两个点连线的集合置空                 points = [];                 //添加最后一个进入数组                 points.push(end);             }         }     }); 

感兴趣的小伙伴可以自行去研究,或者在评论区提问交流。
百度地图Javascript API 3.0 出行路线规划
百度地图JS API示例 路线规划
百度地图avaScript API v3.0类参考

感谢诸君的观看,文中如有纰漏,欢迎在评论区来交流。如果这篇文章帮助到了你,欢迎点赞👍和关注。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 百度地图API——多点路径连线问题
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏