如何通过点击按钮来更改Google地图中心 [英] How to change Google Map Center by clicking a button

问题描述

我使用Google Map API v3和jQuery 1.11.0。

我在以下div中使用Google Map -

 < div id =googleMapclass =map_div>< / div> 
  

map.js 位于HTML文件外部，它已链接。 / p>

现在我在html（ outside map ）的另一部分中有一个按钮 -

 < button id =3>更改中心< /按钮> 
  

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

所以，我在HTML中使用JavaScript这样 -

 <脚本> 
 $（document）.ready（function（）
 {
 $（＃3）。click（function（）{
 var center = new google.maps.LatLng （10.23,123.45）; 
 map.panTo（center）; 
}）; 
}）; 
< / script> 
  

任何人都可以帮我吗？

解决方案

以下是ur问题的代码：

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 >< / script>< button id =1style =padding：10px; cursor：pointer;> Munich< / button>< button id =2style =padding： 10px; cursor：pointer;> New York< / button>< button id =3style =padding：10px; cursor：pointer;>莫斯科< / button>< br>< br> < div style =height：100％; id =map-canvas>< / div>

b
$ b

现场演示在这里 如果你需要更多：）。

I am using Google Map API v3 and jQuery 1.11.0.

I have a Google Map in the following div-

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

The map.js is outside html file, it is linked.

Now I have a button in another part of the html (outside map) like this-

<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 Lat,Lon.

So, I have JavaScript in HTML like this-

<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.

解决方案

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 here if u need more :).

这篇关于如何通过点击按钮来更改Google地图中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！