Javascript 如何通过单击按钮更改 Google 地图中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28499141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change Google Map Center by clicking a button
提问by Abrar Jahin
I am using Google Map API v3 and jQuery 1.11.0.
我使用的是 Google Map API v3 和 jQuery 1.11.0。
I have a Google Map in the following div:
我在以下 div 中有一个谷歌地图：
<div id="googleMap" class="map_div"></div>
The map.jsis outside html file, it is linked.
该map.js是外面的HTML文件，它是联系在一起的。
Now I have a button in another part of the html (outside map) like this:
现在我在 html 的另一部分（地图外）有一个按钮，如下所示：
<button id="3">Change center</button>
Now I want to add a on click event which will change the center of the map to new latitude and longitude.
现在我想添加一个点击事件，它将地图的中心更改为新的纬度和经度。
So, I have JavaScript in HTML like this:
所以，我在 HTML 中有这样的 JavaScript：
<script>
$(document).ready(function()
{
$("#3").click(function(){
var center = new google.maps.LatLng(10.23,123.45);
map.panTo(center);
});
});
</script>
Can anyone help me please? Thanks in advance for helping.
有人可以帮我吗？提前感谢您的帮助。
回答by Ivan Belchev
Here is the code for ur problem:
这是您的问题的代码：
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(48.1293954,12.556663),//Setting Initial Position
zoom: 10
});
}
function newLocation(newLat,newLng)
{
map.setCenter({
lat : newLat,
lng : newLng
});
}
google.maps.event.addDomListener(window, 'load', initialize);
//Setting Location with jQuery
$(document).ready(function ()
{
$("#1").on('click', function ()
{
newLocation(48.1293954,11.556663);
});
$("#2").on('click', function ()
{
newLocation(40.7033127,-73.979681);
});
$("#3").on('click', function ()
{
newLocation(55.749792,37.632495);
});
});html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<button id="1" style="padding:10px; cursor:pointer;">Munich</button>
<button id="2" style="padding:10px;cursor:pointer;">New York</button>
<button id="3" style="padding:10px;cursor:pointer;">Moscow</button>
<br>
<br>
<div style="height:100%;" id="map-canvas"></div>Live demo is hereif u need more :).
如果您需要更多，现场演示就在这里:)。
回答by MrUpsidown
In your initializefunction (or where you create the map) add the following code after you created the map object:
initialize创建地图对象后，在您的函数（或创建地图的位置）中添加以下代码：
google.maps.event.addDomListener(document.getElementById('3'), 'click', function () {
map.setCenter(new google.maps.LatLng(10.23,123.45));
});
