解决页面整体使用transform scale后高德地图点位点击偏移错位问题-前端开发

问题描述：

问题描述：

在网页中使用CSS的transform:scale方法放大缩小页面后，高德地图上的点位位置会出现偏移错位的问题。这可能会影响网页的交互效果。

解决方法：

这个问题的解决方案是将高德地图的点位标注放在一个单独的div中，并在这个div上应用transform:scale，以避免锚点偏移的问题。

步骤如下：

创建一个新的div，将高德地图点位标注的集合放在这个新的div中：

<div id="map">
  <div class="marker-group"></div>
</div>

在CSS中将这个新的div设置为我们需要的缩放值：

#map {
  transform: scale(0.8);
}

在JS中通过高德地图API获取点位标注数据，并通过循环将每个标注添加到新div中：

var markers = [];
for (var i = 0; i < data.length; i++) {
  var marker = new AMap.Marker({
      position: data[i].position,
      icon: data[i].icon
  });
  marker.setMap(map);
  markers.push(marker);
}
$(".marker-group").append(markers);

这样做的效果是所有的点位标注将会被添加到一个单独的div中，并且这个div被应用了缩放值，而不是整个页面。这样就可以解决我们在缩放页面后，点位标注位置偏移错位的问题。

示例1：

代码示例见：https://jsfiddle.net/Lh7zjbfe/4/

在这个示例中，我们创建了一个 div#map 元素，并将其放在一个固定大小的容器中（使用样式 width: 400px; height: 400px）。

我们添加了一个 AMap.Map 的实例，并将其绑定到 div#map：

var map = new AMap.Map("map", {
  zoom: 13,
  center: [116.397428, 39.90923]
});

最后，我们根据一些点坐标信息添加若干个 marker（标记）：

for (var i = 0; i < markers.length; i++) {
  var marker = new AMap.Marker({
    position: markers[i].position,
    map: map
  });

  // 将 marker 保存至集合中
  markerCollection.push(marker);
}

使用样式 transform: scale(.5) 缩小 div#map 的大小，我们可以发现所有的 marker 的位置都出现了偏差。

示例2：

代码示例见：https://jsfiddle.net/wb1x9f75/3/

在这个示例中，我们通过将所有的 marker 都放在一个 div.marker-group 中，然后给这个 div 元素应用一个确定的缩放样式，从而避免了 marker 偏差的问题。

首先，我们在 HTML 中创建了我们需要的 div 元素：

<div id="container" style="width: 400px; height: 400px;">
  <div id="map"></div>
</div>

接下来，使用如下的 CSS 样式，我们将 div#map 缩放至 scale(.5)，同时设置其 transform-origin 为左上角（0 0）：

#map {
  width: 100%;
  height: 100%;

  /* 调整为适当的缩放比例 */
  transform: scale(.5);

  /* 设置缩放的中心为左上角 */
  transform-origin: 0 0;
}

最后，根据一些点坐标信息添加若干个 marker（标记）到 div.marker-group 中：

for (var i = 0; i < markers.length; i++) {
  var marker = new AMap.Marker({
    position: markers[i].position,
    map: map
  });

  // 将 marker 保存至集合中
  markerCollection.push(marker);

  // 添加 marker 到 div.marker-group 中
  $('.marker-group').append(marker.getContent().cloneNode(true))
}