javascript - css 缩放的谷歌地图点击不正确的坐标

Question

我有一张谷歌地图插入到一个 css 缩放的容器中。由于元素的具体情况，这是无法避免的。我需要在此 map 上跟踪点击坐标，但缩放 map 会设置不正确的坐标(请参阅代码片段)。

如何解决这个问题？我暂时没有想法:(

const map = new google.maps.Map(document.querySelector('#map'), {
  center: {lat: 48.7, lng: 31},
  zoom: 6
});

google.maps.event.addListener(map, 'click', (event)=> {
  const marker = new google.maps.Marker({
    position: event.latLng,
    map: map
  });
});

html, body {
    height: 100%;
  }
.container {
  width: 800px;
  height: 600px;
  transform: scale(1.2);
  }
#map {
  width: 100%;
  height: 100%;
  }

<script src="https://maps.googleapis.com/maps/api/js?.js"></script>
<div class="container">
<div id="map"></div>
</div>

Answer 1

好的，想出如何修正修复(这是当转换中心为 0,0 时)

function point2LatLng(point, transformScale, map) {
    var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast());
    var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest());
    var scale = Math.pow(2, map.getZoom());
    var worldPoint = new google.maps.Point(point.x / transformScale / scale + bottomLeft.x, point.y / transformScale / scale + topRight.y);
    return map.getProjection().fromPointToLatLng(worldPoint);
  }

gmaps.event.addListener(this.map, 'click', (event)=> {
          let transformMatrix = window.getComputedStyle(this.$el.closest('.container')).transform.match(/^matrix\((.+)\)$/)[1].split(', ');
          let transformScale = parseFloat(transformMatrix[0]);
          var marker = new gmaps.Marker({
              position: point2LatLng(event.pixel, transformScale, this.map),
              map: this.map
          });
        });