我尝试使用ajax load:
在我的索引页面中加载java脚本google map v3我知道那里有很多同样的问题,但我不能贬低他们。
的index.php
<!DOCTYPE html>
<html>
<head>
<script src="js/vendor/jquery.min.js"></script>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
</head>
<body>
<div id="mapc"></div>
<span id="btn">load map</span>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
$(document).ready(function(){
$("#btn").click(function(){
$("#mapc").load("map.php");
initMap();
});
});
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>
注意:我需要在index.php中使用google API链接,因为我打算在index.php中使用其他谷歌地图。
这也是 map.php
<div id="map"></div>
同样在控制台中我只收到此错误:
js?callback=initMap:74 Uncaught TypeError: Cannot read property 'offsetWidth' of null_.Af @ js?callback=initMap:74_.hg @ js?callback=initMap:81initMap @ (index):19(anonymous function) @ js?callback=initMap:87(anonymous function) @ js?callback=initMap:49_.ac @ js?callback=initMap:46oc @ js?callback=initMap:49(anonymous function) @ js?callback=initMap:123google.maps.Load @ js?callback=initMap:21(anonymous function) @ js?callback=initMap:122(anonymous function) @ js?callback=initMap:123
js?callback=initMap:74 Uncaught TypeError: Cannot read property 'offsetWidth' of null_.Af @ js?callback=initMap:74_.hg @ js?callback=initMap:81initMap @ (index):19(anonymous function) @ (index):28n.event.dispatch @ jquery.min.js:3r.handle @ jquery.min.js:3
答案 0 :(得分:1)
您的问题是页面加载时Element()不存在。 单击&#34;#btn&#34;。
后添加第一个单击后首先工作,请参阅:
$(document).ready(function(){
$("#btn").click(function(){
$("#mapc").append('<div id="map"></div>');
initMap();
});
});
&#13;
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; width: 500px;
height: 500px; }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<div id="mapc"></div>
<button id="btn">load map</button>
<script async defer
src="https://maps.googleapis.com/maps/api/js">
</script>
&#13;
只需删除&#34;?callback = initMap&#34;参数和它工作正常,没有错误。
答案 1 :(得分:0)
您需要在 map.php 加载 后再执行initMap();
。
因此,您需要使用 2 参数调用load
函数:
jQuery docs
回调功能
如果&#34;完成&#34;提供回调,在后处理和执行HTML插入后执行。对jQuery集合中的每个元素触发一次回调,并依次设置为每个DOM元素。
在回调函数中,您可以确保已加载 map.php 并且DOM中存在#map
div。
$("#mapc").load("map.php", function() {
initMap();
});
此外,请从网址
中删除?callback=initMap