百度地圖 批量新增marker和資訊視窗

老王就是我發表於2018-10-19
地圖
別的博主把需求的業務寫得非常複雜，或許是個人能力不足，把博主的業務邏輯抄下來後發現實際上並沒有實現點選marker彈出資訊視窗這個需求，所以就結合其它博主的加上自己個人的理解寫出瞭如下程式碼
<head>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=你的id" charset="UTF-8"></script>
</head>
<body>
<div id="container"></div>
</body>
<style>
var map = new BMap.Map("container",{enableMapClick:false});
    var point = new BMap.Point(113.307649675,23.1200491021);  // 建立點座標
    map.centerAndZoom(point, 15);                 // 初始化地圖，設定中心點座標和地圖級別
    map.enableScrollWheelZoom(true);
    var mapStyle={  style : "*googlelite*" };
    map.setMapStyle(mapStyle);
    var opts = {
        width : 280,
        height: 150,
        title : "" ,
        enableMessage:true,
    };

    var navigation= new BMap.NavigationControl();
    navigation.defaultAnchor=BMAP_ANCHOR_TOP_LEFT;
    map.addControl(navigation);
    map.addControl(new BMap.GeolocationControl());

    var marklist1=[];
    var title=[];
    var data_info=[
        [113.301665,23.142739,"sdfds","aaa","ee","ee","8","8"],
        [113.295122,23.144039,"fff","廣州","aa","dd","3","3"],
        [113.299318,23.131391,"bb","cc","dd","ee","3","3"]
    ];
    for(var i=0;i<data_info.length;i++){
        var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));
        var t1 = data_info[i][2];
        var content = "<h4 style='color:#CC5522;font-size:14px;margin:0 0 5px 0;padding:0.2em 0'>" + data_info[i][2] + "</h4>"+
            "<p style='font:12px arial,sans-serif;margin:0;line-height:1.5;'>"+data_info[i][3]+"</p>"+
            "<p style='font:12px arial,sans-serif;margin:0;line-height:1.5;'>aaa："+data_info[i][4]+"</p>"+
            "<p style='font:12px arial,sans-serif;margin:0;line-height:1.5;'>fff"+data_info[i][5]+"</p>"+
            "<p style='font:12px arial,sans-serif;margin:0;line-height:1.5;'>ddd"+data_info[i][6]+"</p>"+
            "<p style='font:12px arial,sans-serif;margin:0;line-height:1.5;'>eee"+data_info[i][7]+"</p>"+
            "</div>";
        marklist1.push(marker);
        title.push(t1);
        map.addOverlay(marker);
        var label = new BMap.Label(title[i],{offset:new BMap.Size(30,0)});//label.setStyle({ });
        marker.setLabel(label);
        addMarkerInfo(marker,content);
        marklist1.forEach(function(item){item.show();})

    }


    function addMarkerInfo(marker,content){
        var infoWindow = new BMap.InfoWindow(content, opts);
        marker.onclick=function(){
            marker.openInfoWindow(infoWindow);
        }
    }
</style>

 

相關文章