谷歌地圖用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「改造：規模」

回答

相關問題