gpt4 book ai didi

javascript - Google map 无法使用 jquery 加载

转载 作者:行者123 更新时间:2023-12-03 09:46:36 24 4
gpt4 key购买 nike

在我的 Django 应用程序中,我想加载谷歌地图,但它不起作用。我有这样的情况:

index.html

    <!DOCTYPE html> 
<html>
<head>
# here other css
<style>
#mapCanvas {height: 400px;width: 100%;}
.dynamicCanvas {height: 400px;width: 100%;}
</style>
</head>
<body>
<div id="loadpage"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYKEY"></script>

# here other plugin

<script>
jQuery(document).ready(function($) {

// click on #btn_map and open the page with the map
$( document ).on( "click", '#btn_map', function( e ) {
e.preventDefault();
var href = $(this).attr('data-href');
$('#loadpage').load("./mypage.html"));

// google map initialize
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapCanvas"),
myOptions);
}
google.maps.event.addDomListener(window, "load", initialize);
});

});

</script>
</body>
</html>

mypage.html

<div>
<div id="mapCanvas" class="dynamicCanvas"></div>
</div>

在控制台中我没有收到错误。只是 mypage.html 加载而谷歌地图不加载。你能帮我吗?

最佳答案

这不会起作用。对于已经加载的窗口,不能在单击按钮时绑定(bind)窗口加载函数。

  • 注意:将所有这些代码写入包含 map div 的文件中。

只需从 document.ready 中排除 initialize() 函数

function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapCanvas"),
myOptions);
}

并通过单击按钮调用它

 jQuery(document).ready(function($) {

// click on #btn_map and open the page with the map
$(document).on("click", '#btn_map', function(e) {
initialize();
});
});

关于javascript - Google map 无法使用 jquery 加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31007432/

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