在我的 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/