百度地图经纬度定位绘制路线图

物流配送大多涉及到派送轨迹路线(效果如下图)

首先开发百度地图的有一个自己的秘钥这个很简单，在官网上注册一个就ok了 http://lbsyun.baidu.com/apiconsole/key

我直接贴上代码

html

<div id="allmap"></div>

js 将下面的内容引入到<head> </head> 注明:3icsmHEwF3gTx620utwzXfgGxTsGjXoI 是我的秘钥能用你可以测试用下，不能自己注册一个，我估计不能

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <style type="text/css">  
        body, html {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}  
        #allmap {position:absolute;left:0px;width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}  
    </style>  
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3icsmHEwF3gTx620utwzXfgGxTsGjXoI"></script>  
<script src="http://c.cnzz.com/core.php"></script>

扫描二维码关注公众号，回复： 292410 查看本文章

<script type="text/javascript">  
  /*   var list = [{longitude:116.3556880000000006702975952066481113433837890625,latitude:39.8747460000000017998900148086249828338623046875},
                                 {longitude:116.380482,latitude:39.87649},
                                 {longitude:116.427337,latitude:39.87649},
                                 {longitude:116.447459,latitude:39.877265},
                                 {longitude:116.452059,latitude:39.883466},
                                 {longitude:116.451771,latitude:39.890221}]; */
    
    var list=${list};
    var listLast = list.length-1;  
    // 百度地图API功能  
    var map = new BMap.Map("allmap");    // 创建Map实例  
    map.centerAndZoom(new BMap.Point(list[0].longitude,list[0].latitude), 13);  // 初始化地图,设置中心点坐标和地图级别  
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件  
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放  
    setTimeout(drawIcon,1500);  
    var carMk;  
    var myBeginIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/car.png", new BMap.Size(52, 32), {imageOffset: new BMap.Size(0, 0) })
    var myEndIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/car.png", new BMap.Size(52, 32), {imageOffset: new BMap.Size(0, 0) })
    function drawGreenLine(i){  
        var polyline = new BMap.Polyline([  
            new BMap.Point(list[i].longitude,list[i].latitude),//起始点的经纬度  
            new BMap.Point(list[i+1].longitude,list[i+1].latitude)//终点的经纬度  
        ], {strokeColor:"red",//设置颜色  
            strokeWeight:4, //宽度  
            strokeOpacity:1});//透明度  
        map.addOverlay(polyline);  
    }  
  
    function drawIcon(){  
        if(carMk){  
            map.removeOverlay(carMk);  
        }  
        
        carMk2 = new BMap.Marker(  
                     new BMap.Point(list[0].longitude,list[0].latitude),//起始点的经纬度  
                {icon:myBeginIcon});  
                     map.addOverlay(carMk2);  
  
        carMk = new BMap.Marker(  
                new BMap.Point(list[listLast].longitude,list[listLast].latitude),//终点的经纬度  
                {icon:myEndIcon});  
      
        map.addOverlay(carMk);  
  
        for(var i=0;i<list.length-1;i++){  
            drawGreenLine(i);  
        }  
  
    }  
</script>

百度地图经纬度定位绘制路线图

猜你喜欢