有时你需要动态加载谷歌地图，当你尝试这样做时，你会遇到一些问题，你不知道如何修复它们。
这是一种动态加载 Google 地图的方法。
解决方案是：我们可以以简单的形式初始化地图，我们通常如何做，并且我们必须使该地图不可见。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA"></script>
<script>
function initialize() {
var prop = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("onitroad-map"), prop);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="onitroad-map" style="width:500px;height:380px;"></div>
</body>
</html>
现在让我们让地图不可见，把它放在 CSS 样式 display: none 上。
然后我们将通过任何事件进行加载地图的操作。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3XfuMJJGzaU8TUItQM7XWD4esZdbpgtA"></script>
<script>
var map;
function initialize() {
var prop = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map(document.getElementById("onitroad-map"), prop);
}
setTimeout(function(){
map = initialize();
},500);
function w3Load(){
document.getElementById("onitroad-map").style.display = 'block';
google.maps.event.trigger(map, 'resize');
}
</script>
</head>
<body>
<div id="onitroad-map" style="width:500px;height:380px;display: none"></div>
<button onclick="w3Load()">Load The Map</button>
</body>
</html>
日期：2020-06-02 22:17:24 来源：oir作者：oir