如何通过单击按钮更改 Google 地图中心

Posted 2023-02-23

【中文标题】如何通过单击按钮更改 Google 地图中心

【英文标题】：How to change Google Map Center by clicking a button

【发布时间】：2015-04-14 11:13:47

【问题描述】：

我正在使用 Google Map API v3 和 jQuery 1.11.0。

我在以下 div 中有一个谷歌地图：

<div id="googleMap" class="map_div"></div>

ma​​p.js 在 html 文件之外，它是链接的。

现在我在 html 的另一部分（外部地图）有一个按钮，如下所示：

<button id="3">Change center</button>

现在我想添加一个点击事件，它将地图中心更改为新的纬度和经度。

所以，我在 HTML 中有这样的 javascript：

<script>
    $(document).ready(function()
    
        $("#3").click(function()
            var center = new google.maps.LatLng(10.23,123.45);
            map.panTo(center);
        );
    );
</script>

谁能帮帮我？提前感谢您的帮助。

【问题讨论】：

不确定“3”是否为有效 ID（以数字开头）。控制台有错误吗？

“map”变量在哪里定义？它不在您的代码中。

你不能这样做，因为在你的函数中，地图对象可能还没有准备好。你可以在初始化地图后做同样的事情，甚至更好，在google.maps.event.addDomListener。

@JeremyThille 3 是 HTML5 的有效 ID。

map.panTo 是我所需要的。谢谢！

【参考方案1】：

这是你的问题的代码：

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 here如果你需要更多:)。

【讨论】：

这行得通，但它很难看。请改用事件侦听器。

感谢 MrUpsidown！我将其更改为 jQuery 函数。

是的，这已经更好了；）请参阅我对纯谷歌地图 API 解决方案的回答。

【参考方案2】：

在您的 initialize 函数（或您创建地图的位置）中，在您创建地图对象后添加以下代码：

google.maps.event.addDomListener(document.getElementById('3'), 'click', function () 

    map.setCenter(new google.maps.LatLng(10.23,123.45));
);

【讨论】：

能否也添加缩放、mapTypeId 或其他选项？

想通了 map.setZoom(10); 和 map.setMapTypeId(google.maps.MapTypeId.SATELLITE); 似乎对我有用。

是的，或者更好，如果您需要一次更改多个选项，请使用map.setOptions()。