我在使用隐藏的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>
我在移动设备上也遇到了类似的问题。initialize()
当div触发显示时,我调用了该函数。
$('#open_btn').bind('touchstart', function(event){
initialize();
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句