您的位置:首页 > 其它

百度地图 路径规划笔记本

2017-05-19 18:02 197 查看
<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>


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: