百度地圖根據多個經緯度,繪製軌跡

代碼如下:

<style type="text/css">
    html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
</style>

<div id="container"></div>
var data = [{Long:106.652024,Lat:26.617221},{Long:106.652024,Lat:26.614221},{Long:106.654024,Lat:26.612221},{Long:106.657024,Lat:26.612221}];

var dataLast = data.length-1;
	console.log( data )
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(data[0].lng, data[0].lat), 15);
map.addControl(new BMap.MapTypeControl());   //添加地圖類型控件
map.enableScrollWheelZoom(true);     //開啓鼠標滾輪縮放
setTimeout(drawIcon,500);
var carMk;
var myBeginIcon = new BMap.Icon("http://e.hiphotos.baidu.com/image/pic/item/7e3e6709c93d70cfaf72bca2f0dcd100bba12b90.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});//人
var myEndIcon = new BMap.Icon("http://b.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f534c096ae8fe9925bd317dc0.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});//人
                function drawGreenLine(i){
                    var polyline = new BMap.Polyline([
                        new BMap.Point(data[i].lng,data[i].lat),//起始點的經緯度
                        new BMap.Point(data[i+1].lng,data[i+1].lat)//終點的經緯度
                    ], {strokeColor:"red",//設置顏色
                        strokeWeight:4, //寬度
                        strokeOpacity:1});//透明度
                    map.addOverlay(polyline);
                }

                function drawIcon() {
                    if (carMk) {
                        map.removeOverlay(carMk);
                    }
                    carMk2 = new BMap.Marker(
                        new BMap.Point(data[0].lng, data[0].lat),//起始點的經緯度
                        {icon: myBeginIcon});
                    map.addOverlay(carMk2);

                    carMk = new BMap.Marker(
                        new BMap.Point(data[dataLast].lng, data[dataLast].lat),//終點的經緯度
                        {icon: myEndIcon});
                    map.addOverlay(carMk);

                    for (var i = 0; i < data.length - 1; i++) {
                        drawGreenLine(i);
                    }
                }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章