我目前正在尝试根据单击的 anchor 标记来更改屏幕上显示的 map 。纬度和经度存储在名为“data-latLng”的 anchor 标记上的 HTML 属性中，并传递到我的 Javascript，然后使用此 latLng 向 Google API 发出请求。
我遇到的问题是实际 map 没有显示。缩放栏和其他功能显示良好。这只是实际的 map 本身。 我创建了一个 jFiddle 来显示我的代码。 我在这件事上走得正确吗？ 谢谢
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={KEY_HIDDEN}&sensor=false">
</script>
</head>
<body>
<a href="#" class="button" data-latLng="53.488188,-2.373019">Button</a>
<a href="#" class="button" data-latLng="-34.397, 150.644">Button 2</a>
<div id="map-canvas"></div>
</body>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).on("click", ".button", function(e) {
e.preventDefault();
var latLng = jQuery(this).attr("data-latLng");
initialize(latLng);
});
function initialize(latLng) {
var mapOptions = {
center: new google.maps.LatLng(latLng),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
});
最佳答案
仅分割 latLng 效果非常好。
function initialize(latLng) {
latLng = latLng.split(",") //split
var mapOptions = {
center: new google.maps.LatLng(latLng[0],latLng[1]), //assign Seprately
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
});
JS FIDDLE:- http://jsfiddle.net/fJdtY/2/
关于jquery - 使用 jQuery 单击按钮加载 Google map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23404763/