不再困惑！克服百度地图缩放时图标偏移问题

前端

2023-12-25 04:48:04

理解问题根源

在百度地图中，添加overlay（覆盖物）后，开启缩放时可能会出现坐标不正确的状况。这是因为overlay在缩放时会自动适应地图的缩放级别，而图标的位置却不会随之改变，从而导致图标偏移。

提出解决方案

为了解决这一问题，我们可以采取以下方法：

使用anchor属性

anchor属性可以设置图标的锚点位置，即图标相对于其自身中心点的偏移量。我们可以通过设置anchor属性来调整图标的位置，使其在缩放时不会偏移。

使用scale属性

scale属性可以设置图标的缩放比例。我们可以通过设置scale属性来调整图标的大小，使其在缩放时保持不变。

使用translate属性

translate属性可以设置图标的平移量。我们可以通过设置translate属性来调整图标的位置，使其在缩放时移动到正确的位置。

详细步骤

以下是在百度地图中使用anchor、scale和translate属性来解决图标偏移问题的详细步骤：

添加overlay

var overlay = new BMap.Marker(new BMap.Point(116.404, 39.915));
map.addOverlay(overlay);

设置anchor属性

overlay.setAnchor(new BMap.Size(10, 10));

设置scale属性

overlay.setScale(1.5);

设置translate属性

overlay.setTranslate(new BMap.Size(-10, -10));

示例代码

以下是一个完整的示例代码，展示了如何解决百度地图缩放时图标偏移的问题：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915);
var overlay = new BMap.Marker(point);
overlay.setAnchor(new BMap.Size(10, 10));
overlay.setScale(1.5);
overlay.setTranslate(new BMap.Size(-10, -10));
map.addOverlay(overlay);
</script>
</body>
</html>