我目前正在尝试更改屏幕上显示的地图，具体取决于单击了哪个锚标签。纬度和经度存储在锚标签“ data-latLng”的HTML属性中，并传递给我的Javascript，然后使用此latLng向Google API发出请求。
我遇到的问题是未显示实际地图。缩放栏和其他功能显示良好。这是实际的地图本身。
我创建了一个jFiddle来显示我的代码。
我对此是否正确？
谢谢
http://jsfiddle.net/fJdtY/
<!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即可完美工作。
JSFIDDLE：-http://jsfiddle.net/fJdtY/2/
关于jquery - 使用jQuery单击按钮加载Google Map，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23404763/