JS 百度地圖 地圖線路描繪

　　JS 百度地圖 地圖線路描繪

　　

<script type="text/javascript"
            src="http://api.map.baidu.com/api?v=3.0&ak=PlhFWpA02aoURjAOpnWcRGqw7AI8EEyO"></script>

 

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

 

 // 百度地圖API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(113.350512, 23.191744),12);
    map.enableScrollWheelZoom();

    var data=[
        {lng:"113.350512",lat:"23.191744"},
        {lng:"113.364512",lat:"23.182644"},
        {lng:"113.375512",lat:"23.173544"},
        {lng:"113.386512",lat:"23.164344"},
        {lng:"113.397512",lat:"23.155444"},
        {lng:"113.318512",lat:"23.136244"},
        {lng:"113.329512",lat:"23.147144"}
    ]
    var pois1 = [];
    (data).forEach(function (item) {
        pois1.push(new BMap.Point(item.lng, item.lat));
    })

    var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
        scale: 0.4,//圖標縮放大小
        strokeColor: '#fff',//設置矢量圖標的線填充顏色
        strokeWeight: '2',//設置線寬
    });
    var icons = new BMap.IconSequence(sy, '', '5%');
    var point = pois1[Math.ceil(pois1.length / 2)];
    map.centerAndZoom(point, 12);

    //描繪線
    var line=new BMap.Polyline(addPolyline(pois1,"red",5));
    function addPolyline(pois, color, width) {
        var polyline = new BMap.Polyline(pois, {
            enableEditing: false,//是否啟用線編輯，默認為false
            enableClicking: true,//是否響應點擊事件，默認為true
            strokeWeight: width,//折線的寬度，以像素為單位
            strokeOpacity: 0.8,//折線的透明度，取值范圍0 - 1
            strokeColor: color//折線顏色
        });

        map.addOverlay(polyline);          //增加折線
        return polyline;
    };
    var startPng=("./start.png"),endPng=("./end.png"),pointY=("./poscar.png");

    SMSSMAPGetOrders(data,'',map);

    //描繪開始-結束圖標
    setTimeout(function () {
        if (data.length > 1) {
            var length = data.length - 1;
            SMSSMAPAddCars(map, data[0].lng, data[0].lat, startPng, 18, 18, 0);
            SMSSMAPAddCars(map, data[length].lng, data[length].lat, endPng, 18, 18, 0);
        } else {
            SMSSMAPAddCars(map, data[0].lng, data[0].lat,startPng, 18, 18, 0);
        }
    }, 500);

    //描繪途徑點--圖標
    function SMSSMAPGetOrders(pois1, carInfo, mapCity) {
        for (var i = 0; i < pois1.length; i++) {
            if (pois1[i].lng && pois1[i].lng != "") {
                SMSSMAPAddCars(mapCity, pois1[i].lng, pois1[i].lat, pointY, 15, 15, 0)
            }
        }
    };

    //生成圖標
    function SMSSMAPAddCars(map, lng, lat, src, w, h, index) {
        //經緯度轉換
        var point = new BMap.Point(lng, lat);
        var myIcon = SMSSMAPICON(src, w, h, index);
        // 創建標注對象並添加到地圖
        var marker = new BMap.Marker(point, {icon: myIcon});
        marker.setTitle("");
        map.addOverlay(marker);

    };

    //設置圖標格式
    function SMSSMAPICON(src, w, h, index) {
        var myIcon = new BMap.Icon(src, new BMap.Size(w, h), {
            anchor: new BMap.Size(10, 10),
            imageOffset: new BMap.Size(0, 0 - index * h),   // 設置圖片偏移
            // 設置圖片大小
            imageSize: new BMap.Size(w, h)
        });

        return myIcon;
    };