百度地图 路径规划笔记本
博客专区 > RablePHP 的博客 > 博客详情
百度地图 路径规划笔记本
RablePHP 发表于7个月前
百度地图 路径规划笔记本
  • 发表于 7个月前
  • 阅读 14
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 百度地图 路径规划

<div id="allmap"></div>
<style type="text/css">
#allmap { 
	width: 100%;
    height: 281px;
    overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eYf9sA6yVTFHlh9ytU4a0EYY"></script>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 8);
	map.enableScrollWheelZoom(true);
	
	var pois = {$pois};//PHP数据集合

	var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map,autoViewport: true},onMarkersSet:function(routes) {
        map.removeOverlay(routes[0].marker); //删除起点
        map.removeOverlay(routes[1].marker);//删除终点
    }});
	
	var Top = 0;
	var dian = [];
	var mark = [];
	for(var i=0;i<pois.length;i++){
		console.log(pois[i]);
		
		//创建了点
		var p = new BMap.Point(pois[i]['pos_x'], pois[i]['pos_y']); //点
		dian.push(p);
		
		//创建3个marker
		var m1 = new BMap.Marker(p); 
		m1.setIcon(new BMap.Icon('http://demo.dingwei.cn/xingfou/public/Home/img/ic_marker.png',new BMap.Size(22, 35),
		{  
			anchor: new BMap.Size(14, 32) , 
        }));
		map.addOverlay(m1);
		mark.push(m1);
		
		//标签
		//var lab1 = new BMap.Label(pois[i]['place'], { position : p}); //创建3个label
		//map.addOverlay(lab1);
		
		
		if(i==0){
			Top = p; //第一个点
			continue;
		}
		driving.search(Top, p);//waypoints表示途经点
		Top = p; //第一个点
		
		console.log(Top);
		console.log(p);
	}

	driving.setSearchCompleteCallback(function() {
		var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例,获得一系列点的数组

		var polyline = new BMap.Polyline(pts);
		map.addOverlay(polyline);
	})

</script>

输入图片说明

共有 人打赏支持
粉丝 15
博文 46
码字总数 11746
×
RablePHP
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: