logo标签列表

使用CSS的“transform:scale”实现Google地图

cssgoogle-mapsgoogle-maps-markerstransformscale
3
下午好，
我有一个关于谷歌地图和CSS“transform:scale”的问题。我的目标是，如果鼠标悬停在地图上，将地图缩放到1.1倍。但是如果这样做，我就无法再点击标记了。我尝试使用jquery解决它，但没有成功。有没有人有解决方案？
这里有一个fiddle：JSFIDDLE 我认为首先切换缩放大小，然后加载地图，然后切换回旧的大小会使它起作用，但没有成功。
这是我的失败尝试...
$("#map").hover(function(){
$("#map").width(880).height(617.1).load('/index.html', function () {
initialize();
}).width(800).height(561);  
});

感谢您的帮助。
曼努埃尔·斯特罗马耶尔。
2个回答
1
问题很容易解释，但不幸的是我现在没有好的解决方案。
看一下：http://take.ms/2E3fV

Google Map click element for marker after css transform

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

理论上，您可以检查谷歌地图的代码并以任何方式修复此位置，但是:

  • 这不是通用解决方案(例如，不适用于动态引脚)
  • 它可能会在未来更改(类名或整个解决方案)
  • 这只是一种hack而非解决方案
1

你使用 transform:scale 的目的是什么？为什么不使用缩放（zoom）呢？

检查我从你的代码片段中编辑的代码，也许这能帮到你...

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来放大地图中的内容，而是放大包括标题、侧边栏、指北针、标志等在内的整个div的内容。 - Manuel
兄弟，我只将其最大缩放到1.9。也许你可以拿去改进一下... - Eko Junaidi Salam
是的，这正是我们使用transform:scale时遇到的问题。现在无法在正确位置缩放或单击标记。 - Manuel
是的，你说得对。因为谷歌地图不是一个单一的图像，而是包含了更多的部分图像。如果你强制使用变换缩放，那么就会出现问题。 - Eko Junaidi Salam
好的，谢谢。你知道这个问题没有解决方案吗？我认为这很难做！ - Manuel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接