百度地图API——多点路径连线问题
本文系作者 chaoCode原创，转载请私信并在文章开头附带作者和原文地址链接。
违者，作者保留追究权利。
前言
本文是对于在项目应用有遇到的多点连线问题，我的一些解决方式，以及对于之前所学习的一些百度地图API基本使用的一个小结。
如果有小伙伴没有看过之前的百度地图API基本使用（一）｜8月更文挑战，百度地图API基本使用（二）｜8月更文挑战，百度地图API基本使用（三）,可以先去观看一下，前期所需要的一些准备，以及一些基本的用法。
感兴趣的小伙伴可以自行查看百度地图官方提供的文档
百度地图开放平台开发文档中的JavaScript API
也可以通过下方示例中心更直观的看到百度地图API的一些使用，以及它的一些特性
百度地图开放平台-示例中心
想深入研究百度地图avaScript API 3.0方法参数信息的话，可以通过下方类参考
百度地图avaScript API v3.0类参考
另外不同版本的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类参考
感谢诸君的观看，文中如有纰漏，欢迎在评论区来交流。如果这篇文章帮助到了你，欢迎点赞
第一步:奥维地图如何得到规划路径上轨迹点的经纬度(参见我之前的博客). 第二步:各种坐标系转换,选择对应转换坐标系以及输入输出文件路径后可以直接调用(python批量转换,每次运行前清空输出文件res ... 百度地图开放平台功能强大,使用简单,为地图的自定义提供了非常方便的途径! 本文以绘制一张全国机器辐射图为例记录其基本使用方法,效果如下图: 图中包括了带图标和文本的标注,连线以及图例. 1.关于坐标 ... 原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ... 因为之前的html地图页面,所以去找了很多Demo和代码来学习,其中有一个Demo,不知道出处但是最后用了他的方法来处理百度地图的多重打点并且显示标注信息的方法,具体代码我就不贴了,去搜索:百度地图A ... 通过调用百度地图api获取两个地点的距离和时间.参数详见百度地图api官方文档. # -*- coding: utf-8 -*- """ Created on Thu M ... 欢迎大家点一个关注,支持我的原创文章,谢谢! 正文 现在在企业做web项目时,偶尔会用到地图功能,而当前最流行的无疑是百度地图了,百度地图API为应用开发者提供了强大的功能,以下就介绍关于本人在做项目 ... 本文我将从如何使用地图API(本文以百度为例,谷歌类似)开始,往后的扩展行的内容详见后续文章. 1.打开链接http://developer.baidu.com/map/jshome.htm 这里有很 ... 参考文章:百度地图API+ArcGIS软件-城市出行时空数据可视化_WenWu_Both的博客-CSDN博客 这篇博客在介绍的时候遗漏了很多关键步骤,我对此进行了必要的补充. 一.获取轮廓线的代码(g ... 一.引言 地理围栏(Geo-fencing)是LBS 的一种新应用,就是用一个虚拟的栅栏围出一个虚拟地理边界.当手机进入.离开某个特定地理区域,或在该区域内活动时,后台可以感知到这一变化,同时手机可以 ...百度地图API——多点路径连线问题相关推荐
最新文章
热门文章