gpt4 book ai didi

javascript - 使用 load ajax 在当前页面加载新的谷歌地图

转载 作者:行者123 更新时间:2023-12-03 07:40:29 25 4
gpt4 key购买 nike

我尝试使用 ajax 加载在我的索引页中加载 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中添加另一个Google map 。

这也是ma​​p.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

最佳答案

您的问题是 Element () 在页面加载时不存在。单击“#btn”后添加第一个。

点击后首先起作用,参见:

    $(document).ready(function(){
$("#btn").click(function(){
$("#mapc").append('<div id="map"></div>');
initMap();
});
});
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; width: 500px;
height: 500px; }
<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>

只需删除“?callback=initMap”参数即可正常工作,不会出现错误。

关于javascript - 使用 load ajax 在当前页面加载新的谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35428699/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com