css-scaled谷歌地圖點擊不正確的座標

Question

我有一個谷歌地圖插入一個CSS縮放容器。由於項目的具體情況，這是無法避免的。我需要跟蹤此地圖上的點擊座標，但縮放的地圖會設置不正確的座標（請參閱片段）。

這怎麼修復？我此刻:(沒有想法

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

This answer作品，但縮放的地圖工作非常糟糕，許多與座標相關的功能並沒有正確地啓動，但有一個解決方法：將地圖放置在虛擬iframe中：

const iframe = this.$el.querySelector('iframe'); 
    iframe.contentWindow.document.open(); 
    iframe.contentWindow.document.write('<div id="map" style="width: 100%; height: 100%"></div>'); 
    iframe.contentWindow.document.close(); 

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

沒有x來源限制，你可以使用iframe內容來操作你想要的。與此同時，即使父容器被縮放，一切都正常工作

Answer 2

好吧，想出如何正確的修復（這是當轉換中心位於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 
      }); 
     });