带有CSS“变换：比例”的谷歌地图答案

【问题标题】：Google map with css "transform:scale"带有CSS“变换：比例”的谷歌地图
【发布时间】：2015-03-08 06:37:55
【问题描述】：

下午好，

我对 google 地图和 css“transform:scale”有疑问。我的目标是在地图悬停时将地图缩放到 1.1。但如果我这样做，我就不能再点击标记了。我试图用 jquery 解决它，但我没有成功。这里有人有解决方案吗？

这是一个小提琴：JSFIDDLE

我坚持先切换缩放尺寸，然后加载地图，然后切换到旧尺寸才能工作，但没有成功。

这是我失败的尝试..

$("#map").hover(function(){
$("#map").width(880).height(617.1).load('/index.html', function () {
initialize();
}).width(800).height(561);  
});

感谢您的帮助

曼努埃尔·斯特罗迈耶

【问题讨论】：

标签： css google-maps google-maps-markers transform scale

【解决方案1】：

您使用 transform:scale 的意图是什么？你为什么不使用缩放呢？

检查我从你的代码中编辑的代码 sn-p，可能对你有帮助...

function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
    var myLatlng2 = new google.maps.LatLng(-22.363882, 125.044922);
    var mapOptions = {
        zoom: 4,
        center: myLatlng
    };

    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    var contentString = "Pls help me to get the right position :)"
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    var marker1 = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'First Marker'
    });

    var marker2 = new google.maps.Marker({
        position: myLatlng2,
        map: map,
        title: 'Sec Marker'
    });

    google.maps.event.addListener(marker1, 'mouseover', function () {
        map.setZoom(14);
        infowindow.open(map, marker1);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

#map {
     height: 400px;
     width: 400px;
     margin: auto;
     padding: 0px;
     top:100px;
 }

.scale {
    transition: all .2s ease-in-out;
}
#map.scale:hover {
    transform: scale(1.9);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<body>
    <div id="map" class="map scale"></div>
</body>

【讨论】：

我使用 transform:scale 不是放大地图内的内容，而是放大带有地图inkl的div的全部内容。标题、侧边栏、指北针、徽标等。
就是这样，兄弟，我只在 1.9 中最大缩放。也许你可以接受并改进它......
是的，这正是我们在使用 transform:scale 时遇到的问题。现在无法缩放或单击正确位置的标记。
是的，你是对的。因为不要将谷歌地图视为一张图片，但它包含更多部分图片。如果你强制使用变换比例，那就是你得到的问题..
好的，谢谢，您知道没有解决方案吗？我认为这很难做到！

【解决方案2】：

这个问题很容易解释，可惜我现在没有很好的解决方案。

看一看：http://take.ms/2E3fV

在图像上，我标记了矩形，它显示了一个元素现在确切地在哪里响应谷歌地图标记上的点击操作。很简单，当您使用 CSS 缩放地图时，每个图像也会缩放，但位置坐标 (left, right, top, bottom) 不会改变。

理论上你可以检查谷歌地图的代码并以任何方式修复这个位置，但是：

这不是通用解决方案（例如，不适用于动态引脚）
以后可以更改（类名，甚至整个解决方案）
与其说是破解不如说是破解

【讨论】：