Javascript css缩放的谷歌地图单击不正确的坐标

我在css缩放的容器中插入了一个Google地图。由于项目的具体情况，这是无法避免的。我需要跟踪这张地图上的点击坐标，但缩放地图会设置不正确的坐标（请参见代码片段）

这个问题怎么解决？我现在不知道：(

const map=new google.maps.map（document.querySelector（“#map”）{
中心：{lat:48.7，lng:31}，
缩放：6
});
google.maps.event.addListener（映射，'点击'，（事件）=>{
const marker=new google.maps.marker({
位置：event.latLng，
地图：地图
});
})；

html，正文{
身高：100%；
}
.集装箱{
宽度：800px；
高度：600px；
转换：比例（1.2）；
}
#地图{
宽度：100%；
身高：100%；
}

---

好的，找出了如何更正修复（当transformation center为0,0时）

---

好的，了解了如何更正修复（这是在transformation center为0,0时）

工作正常，但缩放贴图效果很差，许多坐标相关功能无法正常工作。但有一个解决方法：将贴图放置在虚拟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
            });

const iframe=this.$el.querySelector（'iframe'）；
iframe.contentWindow.document.open（）；
iframe.contentWindow.document.write（“”）；
iframe.contentWindow.document.close（）；
常量mapContainer=iframe.contentWindow.document.querySelector（“#map”）；
const map=new gmaps.map（mapContainer{
中心：{lat:48.7，lng:31}，
缩放：6
});

没有x原点限制，您可以按照自己的意愿操作iframe内容。有了它，即使父容器被缩放，一切都可以正常工作，但缩放贴图效果很差，许多与坐标相关的功能无法正常工作。但有一个解决方法：将贴图放置在虚拟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
            });

const iframe=this.$el.querySelector（'iframe'）；
iframe.contentWindow.document.open（）；
iframe.contentWindow.document.write（“”）；
iframe.contentWindow.document.close（）；
常量mapContainer=iframe.contentWindow.document.querySelector（“#map”）；
const map=new gmaps.map（mapContainer{
中心：{lat:48.7，lng:31}，
缩放：6
});

---

没有x-origin限制，您可以按照自己的意愿操作iframe内容。有了它，即使父容器被缩放，一切都可以正常运行

我也遇到了这个问题，而上述解决方案对我不起作用，因为：

• @Terion的“Point2Latling”函数似乎没有将标记放置在正确的位置
• @Terion使用虚拟iframe意味着你不能拖动地图，这严重限制了用户体验

但是我确实找到了一种方法：我将map div放在一个容器中，我用这个JS有效地取消了缩放，在所有其他JS之后加载：

//Function: Unscale the map Container
function unscaleMap(scale){
    var unscale = Math.round(10000/(scale * 1))/10000,
        rescale = Math.round(10000 * (100 / unscale))/10000;
    document.getElementById("fs_mapContainer").style.transform = "scale("+unscale+")";
    document.getElementById("fs_mapContainer").style.width = rescale + "%";
    document.getElementById("fs_mapContainer").style.height = 80 * scale + "vh";
}

和CSS：

.map_container {position: relative; transform-origin: 0 0; box-sizing: border-box;}
#map {width: 100%; height: 100%}

---

我也有这个问题，上面的解决方案对我不起作用，因为：

• @Terion的“Point2Latling”函数似乎没有将标记放置在正确的位置
• @Terion使用虚拟iframe意味着你不能拖动地图，这严重限制了用户体验

但是我确实找到了一种方法：我将map div放在一个容器中，我用这个JS有效地取消了缩放，在所有其他JS之后加载：

//Function: Unscale the map Container
function unscaleMap(scale){
    var unscale = Math.round(10000/(scale * 1))/10000,
        rescale = Math.round(10000 * (100 / unscale))/10000;
    document.getElementById("fs_mapContainer").style.transform = "scale("+unscale+")";
    document.getElementById("fs_mapContainer").style.width = rescale + "%";
    document.getElementById("fs_mapContainer").style.height = 80 * scale + "vh";
}

和CSS：

.map_container {position: relative; transform-origin: 0 0; box-sizing: border-box;}
#map {width: 100%; height: 100%}

---

您将需要自己实现所有单击事件处理，并考虑缩放。@geocodezip yeap，Figure Out您将需要自己实现所有单击事件处理，并考虑缩放。@geocodezip yeap，Figure outfixe my issue fixe my issue