谷歌地图用CSS“改造：规模”

我有一个谷歌地图和CSS的问题“改造：规模”。我的目标是如果地图悬停，将地图缩放到1.1。但是，如果我这样做，我不能再点击标记。我试图用jQuery解决它，但我没有成功。这里有谁有解决方案？

这里是一个小提琴：JSFIDDLE

我因子评分是第一开关缩放大小，然后加载地图，然后切换到旧的规模将得到它的工作，但没有成功。

这里是我的半途而废的尝试..

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

感谢您的帮助

曼努埃尔Strohmaier的

来源

2015-01-09 Manuel

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

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

Google Map click element for marker after css transform

在图像标志着我矩形表示正是现在wchich对谷歌地图标记点击动作响应的元素。简而言之，当您使用CSS缩放地图时，每个图像也会缩放，但位置坐标（left, right, top, bottom）不会更改。

Theoreticaly您可以检查谷歌地图的代码和修复以任何方式这个位置，但：

它不是（不适用于例如动态销）
它可以在未来被改变（类通用的解决方案名字，甚至整体解决方案）
它，而不是黑客是一个使用你的INTENS改造解决方案

来源

2015-01-09 23:06:57

：规模有多大？为什么你不使用缩放？

检查我的代码片段，我从你的编辑，可能是这个帮助你...

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>

来源

2015-01-10 02:37:25

我用的变换：规模扩大而不是地图里面的内容，而是div与地图inkl的整个内容。标题，侧边栏，北方箭头，标志等。 – Manuel 2015-01-10 12:23:49

我正在检查它...请稍候... – 2015-01-10 12:41:49

这是它的兄弟，我只能在1.9的最大比例。可能是你可以接受并改进它... – 2015-01-10 12:46:32

谷歌地图用CSS“改造：规模”

回答

相关问题