gpt4 book ai didi

jquery - 使用 jQuery 单击按钮加载 Google map

转载 作者:行者123 更新时间:2023-12-01 06:47:03 25 4
gpt4 key购买 nike

我目前正在尝试根据单击的 anchor 标记来更改屏幕上显示的 map 。纬度和经度存储在名为“data-latLng”的 anchor 标记上的 HTML 属性中,并传递到我的 Javascript,然后使用此 latLng 向 Google API 发出请求。

我遇到的问题是实际 map 没有显示。缩放栏和其他功能显示良好。这只是实际的 map 本身。我创建了一个 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 效果非常好。

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/

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