[英]Google Maps stuck on top-left corner - solution for Desktop doesn't work for mobile design
我在使用隱藏的DIV元素渲染地圖時遇到了Google Maps問題。 渲染了地圖,但即使我移動了地圖,也僅顯示了左上角。
我發現的解決方案是等待渲染地圖,然后點直到用戶實際顯示地圖。 我通過使間隔計數器每半秒迭代一次來執行此操作,以查看用戶是否單擊了按鈕以打開/顯示元素。
這適用於桌面瀏覽器,但不能解決移動瀏覽器的相同問題。 角落仍然卡住,我不確定如何從移動角度處理該問題。
<script type="text/javascript">
var locations = [SOME DATA];
var map;
var bounds;
function initialize() {
var myLatlng = new google.maps.LatLng(0, 0);
var mapOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var entity = locations[i];
var myLatLng = new google.maps.LatLng(entity[6], entity[7]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: pinBase + pin
});
if(entity[8] < 5) {
bounds.extend(marker.position);
}
var infowindow = new google.maps.InfoWindow({});
if(entity[5] == "0") {
entity[5] = "N/A";
}
contentString = "<div class=\"mapBaloon\"><b>" + entity[0] + "</b><br />WWW: <a href=\"http://" + entity[2] + "\">http://" + entity[2] + "</a><br />City: " + entity[3] + "<br />State: " + entity[4] + "<br />Phone: " + entity[5] + "<br />Distance: " + entity[8] + " miles</div>";
bindInfoWindow(marker, map, infowindow, contentString);
}
map.fitBounds(bounds);
}
function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
}
var myVar = setInterval(function() {
google.maps.event.addDomListener(window, 'load', initialize);
if($(".commArea2").is(":visible")) {
clearInterval(myVar);
google.maps.event.trigger(map, 'resize');
map.fitBounds(bounds);
}
}, 500);
</script>
我在移動設備上也遇到了類似的問題。 當div觸發顯示時,我調用了initialize()
函數。
$('#open_btn').bind('touchstart', function(event){
initialize();
})
在我頭頂上方,有幾種可能的原因可能導致這種情況。 因為它可以在台式機上工作,而不是在移動設備上工作,所以我懷疑您遇到了競爭狀況。 桌面速度更快,它將更快地加載Google Maps Javascript。 您的500毫秒的延遲聽起來不足以等待移動設備上的時間。 但是,您不會提高setInterval。 擺脫它。
Google提供了向您的“
https://developers.google.com/maps/documentation/javascript/examples/map-simple-async
我遇到的另一個問題是,在執行任何操作之前,您確實必須確保地圖上有明確的寬度/高度。 設置width / height屬性,執行“ position:absolute”,定義所有頂部/左側/底部/右側,或其他方式。 但是,如果Maps API無法弄清父元素的顯式寬度,您將在角落看到一個漂亮的框。 但是就像您說的那樣,它在一個地方起作用,因此這可能不是問題。 只需確保您要使用移動瀏覽器不支持的HTML或CSS格式。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.