在webapp中我使用ajax加载页面(带地图的googlemap.asp)。
我正在使用jquery.load在div中加载“googlemap.asp”并且它只在左上角显示一个小地图,所以它没有达到我在div中设置的尺寸320 x 600 。 当我以这种方式加载地图时,它无法正确渲染地图。
但是如果我只是直接在浏览器中加载“googlemap.asp”(没有ajax)那么它会显示正确,所以当我用ajax加载它时,我想我必须以某种方式重新刷新它?
这就是我所拥有的:
<div id="map_canvas" style="height:600px; width:320px;" ></div>
window.onload=googleMaploadScript();
function googleMaploadScript() {
var script =document.createElement("script");
script.type="text/javascript";
script.src="http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
var address1 = document.getElementById('address').value;
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(57.109577,12.286513),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
codeAddress(address1);
}
function codeAddress(address) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
我想我会以某种方式以错误的顺序加载它,这就是为什么它不能正确渲染,或者可能是div在开始时不可见?
感谢任何意见,谢谢。
答案 0 :(得分:0)
尝试更改脚本中的高度和宽度。
答案 1 :(得分:0)
对于居中,请将此脚本添加到地图脚本中,然后将其居中。但我也很难将它从左上角带到中心。在我的情况下,当我更改方向或大小时,地图加载并居中
//用于居中的脚本
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
让我知道它是否有效。以下是LINK以获取更多信息