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

问题产生的原因

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

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

测试代码

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


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

你可能感兴趣的:(百度地图,地图)