百度地图缩放或拖拽时多边形覆盖物消失问题

最新推荐文章于 2022-05-07 15:52:15 发布

原创最新推荐文章于 2022-05-07 15:52:15 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #覆盖物 #多边形 #消失 #缩放拖拽

地图同时被 2 个专栏收录

32 篇文章

订阅专栏

百度地图

19 篇文章

订阅专栏

本文解析了在使用百度地图API时，因Point对象创建方式不当导致地图覆盖物显示异常的问题。强调了应使用new BMap.Point()实例化而非普通对象字面量，以确保地图覆盖物如多边形在拖拽或缩放时稳定显示。

问题产生的原因

如果point点不是通过new BMap.point()实例化的，而是普通的对象字面量，就会导致覆盖物在拖拽或缩放时忽隐忽现的情况产生

let point = new BMap.Point(116.13930, 39.95615); //正确
let point =  { lng: 116.13930, lat: 39.95615 }; //错误

测试代码

提示：示例里需要加上自己的百度地图key才能正常显示

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body,
            html,
            #allmap {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
                font-family: '微软雅黑';
            }

            .map-container {
                width: 800px;
                height: 600px;
                margin: 100px auto;
                padding: 20px;
                border-radius: 4px;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            }
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=换成自己的key"></script>
        <title>地图展示</title>
    </head>
    <body>
        <div class="map-container">
            <div id="allmap"></div>
        </div>
        <script type="text/javascript">
            // 百度地图API功能
            const map = new BMap.Map('allmap'); // 创建Map实例
            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
            //添加地图类型控件
            map.addControl(
                new BMap.MapTypeControl({
                    mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
                })
            );
            map.setCurrentCity('北京'); // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

            //正确的创建方式
            const points = [
                new BMap.Point(116.13930064118992, 39.95615603052643),
                new BMap.Point(116.30027698857798, 40.120550743323555),
                new BMap.Point(116.49804792965472, 40.17526018386917),
                new BMap.Point(116.6659232633594, 40.16820339701612),
                new BMap.Point(116.86829352864723, 40.058728648541376),
                new BMap.Point(116.90738778444147, 39.95261627315906),
                new BMap.Point(116.94648204023571, 39.78426515610893),
                new BMap.Point(116.93958305391908, 39.68483157903677),
                new BMap.Point(116.76940805810885, 39.63861684939448),
                new BMap.Point(116.51414556439352, 39.62972582992537),
                new BMap.Point(116.30947563700015, 39.631504125975866),
                new BMap.Point(116.16689658645645, 39.76829451203239),
                new BMap.Point(116.19679219382851, 39.85165557462397),
                new BMap.Point(116.19679219382851, 39.85165557462397),
            ];

            //错误的创建方式
            // const points = [
            //     { lng: 116.13930064118992, lat: 39.95615603052643 },
            //     { lng: 116.30027698857798, lat: 40.120550743323555 },
            //     { lng: 116.49804792965472, lat: 40.17526018386917 },
            //     { lng: 116.6659232633594, lat: 40.16820339701612 },
            //     { lng: 116.86829352864723, lat: 40.058728648541376 },
            //     { lng: 116.90738778444147, lat: 39.95261627315906 },
            //     { lng: 116.94648204023571, lat: 39.78426515610893 },
            //     { lng: 116.93958305391908, lat: 39.68483157903677 },
            //     { lng: 116.76940805810885, lat: 39.63861684939448 },
            //     { lng: 116.51414556439352, lat: 39.62972582992537 },
            //     { lng: 116.30947563700015, lat: 39.631504125975866 },
            //     { lng: 116.16689658645645, lat: 39.76829451203239 },
            //     { lng: 116.19679219382851, lat: 39.85165557462397 },
            //     { lng: 116.19679219382851, lat: 39.85165557462397 },
            // ];

            //创建多边形
            const polygon = new BMap.Polygon(points, { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5 });

            map.addOverlay(polygon);
        </script>
    </body>
</html>