我在空白页上有以下 map 代码:
<div id="map"></div>
<script>
var map;
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Business Location'
});
}
google.maps.event.addDomListener(window, 'load', initMap);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEYM&signed_in=false&callback=initMap"></script>
我希望 map 在浏览器宽度上更改为设定大小,如下所示:
#map { // Full screen
height: 100%;
min-height: 400px;
width: 100%;
max-width: 970px;
margin-left: 5px;
}
@media only screen and (max-width: 1281px) { // Smaller width screen
#map {
width: 480px;
}
}
调整大小通过媒体查询进行,但不会触发 map 重新加载/居中。
我收到以下错误:
Uncaught ReferenceError: google is not defined
经过进一步研究,我了解到在 initMap 运行之前无法调用任何映射方法(因为这是异步加载)。不知道如何解决这个问题。谢谢!
最佳答案
我可以看到您的代码存在两个主要问题。首先,您在两个不同的地方调用 initMap 函数:
加载google maps JS时的回调参数:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEYM&signed_in=false&callback=initMap"></script>
还有窗口加载:
google.maps.event.addDomListener(window, 'load', initMap);
不要那样做,只能使用这些方法中的一种,否则你会调用该函数两次,创建两个映射,这只会导致问题。
其次,您创建一个global map
变量,当您执行var map;
时,这很好。然而,您随后在 initMap 函数中创建了一个新的 local 变量,它只能被该函数访问:
var map = new google.maps.Map(...)
因此,当您尝试在事件监听器中再次访问它以调整 map 大小(使用 map.getCenter()
等)时,您得到的只是global 变量,此时它是一个空对象,而不是 local 变量,它是实际的 Map 对象。
这是我要将您的代码修改为:
<script>
var map;
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Business Location'
});
}
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEYM&signed_in=false&callback=initMap"></script>
我可能还会将窗口调整大小事件监听器移动到 initMap 函数中,这样您就可以在知道已经创建 map 对象后引用它。
关于javascript - 谷歌地图 V3 在更改后使用媒体查询调整大小而不是居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34375502/