百度地图之修改起点和终点的icon

修改起点和终点的icon图标是有区别的，区别在于你有没有途经点，如果你的项目中只有起点和终点的话，那么你可以用第一种方法，如果有途经点的话，那么就要用第二种方法，当然第二种方法也可用于没有途径点的情况下，这个就是随君喜欢了；

1.在没有途径点的情况下修改起点和终点的icon

var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.enableScrollWheelZoom(true);var p1 = new BMap.Point(116.301934,39.977552);
var p2 = new BMap.Point(116.508328,39.919141);var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
driving.search(p1, p2);//waypoints表示途经点
var startIcon=new BMap.Icon("../img/startIcon.png", new BMap.Size(40,50));
var endIcon = new BMap.Icon("../img/endIcon.png", new BMap.Size(40,50));driving.setMarkersSetCallback(function(result){result[0].marker.setIcon(startIcon);result[1].marker.setIcon(endIcon);})

2.在有途径点的情况下修改icon。如果把上面的方法用在有途经点的情况下的话，那么你的地图上的就会报出如下错误：

var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.enableScrollWheelZoom(true);var p1 = new BMap.Point(116.301934,39.977552);
var p2 = new BMap.Point(116.508328,39.919141);var myIcon = new BMap.Icon("../img/startIcon.png", new BMap.Size(40,50));
var marker2 = new BMap.Marker(p1,{icon:myIcon});  // 创建标注
map.addOverlay(marker2);
var myIcon1 = new BMap.Icon("../img/endIcon.png", new BMap.Size(40,50));
var marker3 = new BMap.Marker(p2,{icon:myIcon1});  // 创建标注
map.addOverlay(marker3);
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},onPolylinesSet:function(routes) {searchRoute = routes[0].getPolyline();//导航路线map.addOverlay(searchRoute);},onMarkersSet:function(routes) {           map.removeOverlay(routes[0].marker); //删除起点map.removeOverlay(routes[routes.length-1].marker); //删除终点}});driving.setSearchCompleteCallback(function(){var plan = driving.getResults().getPlan(0);})driving.search(p1, p2,{waypoints:["北京科技大学","北京国际会议中心"]});//waypoints表示途经点

效果展示：

百度地图之修改起点和终点的icon相关推荐

百度地图导航路线起点、终点、途经点删除的方法
最近使用百度地图做项目时,需要利用百度地图的导航路线画两个收费站的车流路线图.因为要用不同颜色表示车流量的大小.所以要先利用百度地图的导航功能找到路路线,再覆盖折线,从而设置不同的颜色.为了更准确的找 ...
Python调用百度地图api获取起点终点路线规划距离和预估时长
现有起点和终点坐标值(经纬度lng.lat),目的是通过百度地图开发者平台的路线规划功能获取起点终点路线规划距离和预估时长,百度地图开发者平台路线规划使用说明网址为:http://lbsyun.bai ...
百度地图API——修改infowindow样式
前言最近又用到了百度地图api,之前用到的是百度地图js api的写法,需要一个个定义对象,添加事件或者监控,最后画到地图上,时不时还有渲染时序不对的情况,非常的不友好.所以这次用了vue Baid ...
百度地图动态修改图标
百度地图API真的是无力吐槽. 最近做一个页面推送功能,需要实时修改百度地图覆盖物的图标,研究了一下午,总算出来了.其实也不难,利用提供的setIcon()方法可以对图标进行动态更新. //覆盖物扫描 ...
百度地图API : 修改marker图标(icon)
var map = new BMap.Map("map"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创 ...
vue调用百度地图动态修改中心点
初始化地图 initialApi () { var map = new BMap.Map("allmap") //初始化地图时中心点的位置为深圳 var p ...
百度地图案例-修改地图样式
https://lbsyun.baidu.com/apiconsole/custommap 这个网址里面点击特色服务平台 - 个性化地图 - 地图模板 - 选择地图样式 - 点击发布样式 - 复制i ...
百度地图－修改marker图标(icon)
var map = new BMap.Map("map"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创 ...
android 百度地图驾车导航,百度地图API详解之驾车导航
本文将向大家介绍如何使用百度地图API提供的驾车导航服务进行开发. 一个简单的示例驾车导航服务根据传入的起点和终点信息给出从起点到终点的驾车路线,我们先从一个最简单的示例看起: var map = ...

百度地图之修改起点和终点的icon

百度地图之修改起点和终点的icon相关推荐

最新文章

热门文章