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;
    };