循环添加多个自定义覆盖物，点击弹出对应信息窗口

最新推荐文章于 2023-07-05 13:43:21 发布

weixin_44754663

最新推荐文章于 2023-07-05 13:43:21 发布

阅读量188

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_44754663/article/details/110957199

版权

循环添加多个自定义覆盖物，点击弹出对应信息窗口

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&ak=CB2ede775afeb6e413abd40261396a69"></script>
  <title>循环添加多个自定义覆盖物，点击弹出对应信息窗口</title>

</head>

<body>
  <div id="allmap" style="width: 100%;height: 600px;"></div>
</body>

</html>
<script type="text/javascript">

var map = new BMap.Map("allmap", { enableMapClick: false });
        map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
        map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
        map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
        map.enableScrollWheelZoom(true);// 开启鼠标滚轮缩放
        map.setDefaultCursor("hand"); 
        var Point=new BMap.Point(116.404, 39.915) //初始化中心坐标
        map.centerAndZoom(Point, 14); // 初始化地图,设置中心点坐标和地图级别

        //数据的结构（coordinate和text相互对应的）
        let coordinate=[
            [[116.38, 39.91],[116.38, 39.92],[116.40, 39.92],[116.40, 39.91]],
            [[116.38, 39.92],[116.38, 39.93],[116.40, 39.93],[116.40, 39.92]],
            [[116.399, 39.910],[116.405, 39.920],[116.423493, 39.907445]]
        ]
        let text=[
            {
                title:"常青园三区",
                shoplist1:[
                    {
                        shop:"清河五彩店",
                        jl:"近"
                    },
                    {
                        shop:"清河哈哈店",
                        jl:"远"
                    },
                ],
                con:1000,
                xdcon:20,
                stl:10,
            },
            {
                title:"常青园1区",
                shoplist1:[
                    {
                        shop:"清河五彩店11",
                        jl:"近"
                    },
                    {
                        shop:"清河哈哈店22",
                        jl:"远"
                    },
                ],
                con:1000,
                xdcon:20,
                stl:10,
            },
            {
                title:"常青园4区",
                shoplist1:[
                    {
                        shop:"清河五彩店444",
                        jl:"近"
                    },
                    {
                        shop:"清河哈哈店444",
                        jl:"远"
                    },
                    {
                        shop:"清河嘿嘿444",
                        jl:"中"
                    },
                ],
                con:1000,
                xdcon:20,
                stl:10,
            },
        ]
        console.log(coordinate);
        console.log(text);
        //创建一个覆盖物数组
        let polygonArr=[];
        for(let i=0;i<=coordinate.length-1;i++){
            //创建一组覆盖物的点数组
            let markerArr=[]
            for(let j=0;j<=coordinate[i].length-1;j++){
                markerArr.push(new BMap.Point(coordinate[i][j][0], coordinate[i][j][1]))
            }
            //覆盖物的配置（颜色和透明度）
            let itempolygon= new BMap.Polygon(markerArr,{
                fillOpacity:0.2,
                fillColor: 'red',
                strokeColor: 'black',
                strokeWeight: 1,
                strokeOpacity: 0.1
            })
            //遍历绘制覆盖物
            map.addOverlay(itempolygon); 
            //存放覆盖物
            polygonArr.push(itempolygon);
        }
        console.log(polygonArr)
        //遍历覆盖物的点击事件和先关信息
        for (let k = 0; k < polygonArr.length; k++) {
            const overlay = polygonArr[k];
            // 创建信息窗口对象
            let infoWindow = new BMap.InfoWindow();  
            //设置窗口文案和宽高
            infoWindow.setWidth(240)
            infoWindow.setHeight(200)
            //相关信息里的数组信息的处理
            let shop_jl=''
            text[k].shoplist1.map(item=>{
                shop_jl+=`关联店铺：${item.shop}&nbsp;&nbsp;距离：${item.jl}</br>`
            })
            let title=`<h4>${text[k].title}</h4>`
            let content=`${shop_jl}
                         总数：${text[k].con}</br>
                         下单数：${text[k].xdcon}</br>
                         渗透率：${text[k].stl}%</br>
                        `
            infoWindow.setTitle(title)//设置信息头
            infoWindow.setContent(content)//设置信息内容
            overlay.addEventListener("click", e => {
                var point = new BMap.Point(e.point.lng, e.point.lat);
                map.openInfoWindow(infoWindow, point); //开启信息窗口
            });
        }
</script>```