Question

下午好，

我的谷歌地图和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);  
});

感谢您的帮助

Manuel Strohmaier

Answer 1

问题很容易解释，但不幸的是我现在还没有很好的解决方案。

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

Google Map click element for marker after css transform

在图像上我标记了矩形，它显示了现在的确切位置，即对谷歌地图标记上的点击操作做出响应。简单地说，当您使用CSS缩放地图时，每个图像也会缩放，但位置坐标（left, right, top, bottom）不会改变。

Theoreticaly您可以检查Google Map的代码并以任何方式修复此位置，但是：

它不是通用解决方案（例如，不适用于动态引脚）
将来可以更改（类名，甚至整个解决方案）
这比解决方案更糟糕

Answer 2

你使用变换的强度是什么：规模？为什么不用缩放呢？

检查我编辑的代码片段，可能对您有帮助......

＆＃13;

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);

＆＃13;

#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);
}

＆＃13;

<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>

＆＃13;

谷歌地图与css“变换：规模”

2 个答案: