百度地图多边形消失的问题解决

最新推荐文章于 2024-07-19 12:05:11 发布

xiaoping_1988

最新推荐文章于 2024-07-19 12:05:11 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：百度地图 javascript

本文链接：https://blog.youkuaiyun.com/xiaoping_1988/article/details/78275193

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在地图应用中使用多边形覆盖物时遇到的问题：当地图移动或放大时，未完全可见的多边形可能会消失。文章提供了错误代码示例，并给出了正确的实现方法，即使用new BMap.Point()构造函数来创建地图坐标点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述:

地图移动或者放大地图时,如果多边形不能全部可见则会消失

问题代码:

var points = [{"lng":116.4935302734375,"lat":40.0506591796875},{"lng":116.4935302734375,"lat":40.05615234375},{"lng":116.488037109375,"lat":40.05615234375},{"lng":116.488037109375,"lat":40.0616455078125},{"lng":116.488037109375,"lat":40.067138671875},{"lng":116.488037109375,"lat":40.0726318359375},{"lng":116.4935302734375,"lat":40.0726318359375}];
// points参数没有通过new BMap.Point()构造对象,就会出现上面的问题
var ply = new BMap.Polygon(points, {strokeWeight: 2, strokeColor: '#0905ff', fillColor: '#5182E4', fillOpacity: 0.2}); // 建立多边形覆盖物

map.addOverlay(ply);  // 添加覆盖物

正确代码:

var points = [{"lng":116.4935302734375,"lat":40.0506591796875},{"lng":116.4935302734375,"lat":40.05615234375},{"lng":116.488037109375,"lat":40.05615234375},{"lng":116.488037109375,"lat":40.0616455078125},{"lng":116.488037109375,"lat":40.067138671875},{"lng":116.488037109375,"lat":40.0726318359375},{"lng":116.4935302734375,"lat":40.0726318359375}];

// 正确代码段
var ps = []
for (var i in points) {
    ps.push(new BMap.Point(points[i].lng,points[i].lat));
}

var ply = new BMap.Polygon(ps, {strokeWeight: 2, strokeColor: '#0905ff', fillColor: '#5182E4', fillOpacity: 0.2}); // 建立多边形覆盖物

map.addOverlay(ply);  // 添加覆盖物