Javascript 谷歌地图 PanTo OnClick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6191714/
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
Google Maps PanTo OnClick
提问by RIK
I am trying to panTo an area on a map on click. The script is not working and page reloading. Perhaps someone can see the problem.
我试图在点击时平移到地图上的一个区域。脚本不起作用，页面正在重新加载。也许有人可以看到问题所在。
My function
我的功能
function clickroute(lati,long) {
map = google.maps.Map(document.getElementById("map_canvas"));
map.panTo(lati,long)
}
And the rest
剩下的
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var address = 'virginia water';
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
});
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
And my event
还有我的活动
<a href="" onclick="clickroute(51.433373, -0.712251)">test</a>
回答by Stanley Cup Phil
The issue is that your using map.panTo(latitude,longitude)but the google maps API uses this: panTo(latLng myLatLng)where latLngis a google map class.
问题是你使用map.panTo(latitude,longitude)但谷歌地图 API 使用这个：谷歌地图类panTo(latLng myLatLng)在哪里latLng。
try something like this (untested)
尝试这样的事情（未经测试）
function clickroute(lati,long) {
var latLng = new google.maps.LatLng(lati, long); //Makes a latlng
map.panTo(latLng); //Make map global
}
Look herefor more info.
看看这里获取更多信息。
EDITAs someone else stated you don't want to remake a new map. Maybe its easier to make it global?
编辑正如其他人所说，您不想重新制作新地图。也许更容易让它成为全球性的？
回答by Michal
The panTo accepts LatLng object as parameters not just coordinates. Create a LatLng object before passing it to panTo method.
panTo 接受 LatLng 对象作为参数，而不仅仅是坐标。在将它传递给 panTo 方法之前创建一个 LatLng 对象。
function clickroute(lati,long) {
map.panTo(new google.maps.LatLng(lati,long));
return false; //this will cancel your navigation
}
Your page reloads because you do not cancel the navigation event in onClick that you put in the anchor tag. See comment in code above.
您的页面会重新加载，因为您没有取消放置在锚标记中的 onClick 导航事件。请参阅上面代码中的注释。
And like the others say take out the map variable from this function and make map global.
就像其他人所说的那样，从这个函数中取出 map 变量并使 map 成为全局变量。
回答by thegrunt
you can also set a new marker on the fly:
您还可以即时设置新标记：
var LatLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
content: "<h2>Hier wohne ich!</h2>",
map: map,position: results[0].geometry.location
});
map.panTo(LatLng);
回答by Arjjun
You can do this:
你可以这样做：
var latLng = new google.maps.LatLng(lat_val, lng_value);
map.panTo(latLng);`
回答by Jasoon
The line...
线...
map = google.maps.Map(document.getElementById("map_canvas"));
.. is actually attempting to create a new Map within the #map_canvas Div. Since that map should already exist, you don't need that assignment statement. Just calling
.. 实际上是试图在 #map_canvas Div 中创建一个新地图。由于该映射应该已经存在，因此您不需要该赋值语句。只是打电话
map.panTo(lati,long)
should work?
应该管用？
Edit: Sorry, SSRide360 is correct that should be...
编辑：对不起，SSRide360 是正确的，应该是......
map.panTo(new google.maps.LatLng(lati, long));
