百度地图批量添加marker和信息窗口

最新推荐文章于 2024-04-19 01:59:38 发布

老王就是我

最新推荐文章于 2024-04-19 01:59:38 发布

阅读量4.2k

点赞数 2

本文链接：https://blog.csdn.net/qq_22899047/article/details/83186022

版权

别的博主把需求的业务写得非常复杂，或许是个人能力不足，把博主的业务逻辑抄下来后发现实际上并没有实现点击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>
<script>
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);
        }
    }
</script>

老王就是我

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
5
评论
百度地图批量添加marker和信息窗口

别的博主把需求的业务写得非常复杂，或许是个人能力不足，把博主的业务逻辑抄下来后发现实际上并没有实现点击marker弹出信息窗口这个需求，所以就结合其它博主的加上自己个人的理解写出了如下代码<head><script type="text/javascript" src="http://tajs.qq.com/stats?sId=你的id" charset="UTF-8"...
复制链接

扫一扫