javascript Google Maps API：平移到列表中的标记。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14306098/
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 API: pan to markers from a list.
提问by Robin Papa
Hello :) Please bear with me, I'm not a coder but I'm trying to learn by doing. This is the page I'm working on currently; http://www.websu.it/devnw/dev/contact.html. I've currently set up a map using the Google Maps API, using the following javascript:
你好 :) 请耐心等待，我不是编码员，但我正在尝试边做边学。这是我目前正在处理的页面；http://www.websu.it/devnw/dev/contact.html。我目前使用以下 javascript 使用 Google Maps API 设置了地图：
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(48.160, -6.832),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
setMarkers(map, cities);
}
var cities = [
['Groningen', 53.216723950863425, 6.560211181640625, 4],
['San Francisco', 34.01131647557699, -118.25599389648437, 5],
['New York City', 40.7143528, -74.0059731, 3],
['Amsterdam', 52.3702157, 4.8951679, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var city = locations[i];
var myLatLng = new google.maps.LatLng(city[1], city[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: city[0],
zIndex: city[3]
});
}
}
This continues below...
And then I created a list where every li element, when clicked upon, results in a panning of the map to one of these markers.
然后我创建了一个列表，其中每个 li 元素在单击时都会导致地图平移到这些标记之一。
I've added the following code and it works very well. But it means that I have to add the longitudes/latitudes for every city in the above code array of "cities", as well as in the code below for the var laLatLng. How can I get the lat's and lon's more easily in the panning script below?
我添加了以下代码，效果很好。但这意味着我必须在上面的“城市”代码数组以及下面的 var laLatLng 代码中添加每个城市的经度/纬度。如何在下面的平移脚本中更轻松地获得纬度和经度？
$(document).ready(function() {
initialize();
$("#contacts").on("click", "#sanfransisco", function() {
var laLatLng = new google.maps.LatLng(34.01131647557699, -118.25599389648437);
map.panTo(laLatLng);
map.setZoom(5);
});
$("#contacts").on("click", "#groningen", function() {
var laLatLng = new google.maps.LatLng(53.216723950863425, 6.560211181640625);
map.panTo(laLatLng);
map.setZoom(6);
});
$("#contacts").on("click", "#nyc", function() {
var laLatLng = new google.maps.LatLng(40.7143528, -74.0059731);
map.panTo(laLatLng);
map.setZoom(6);
});
$("#contacts").on("click", "#losangeles", function() {
var laLatLng = new google.maps.LatLng(52.3702157, 4.8951679);
map.panTo(laLatLng);
map.setZoom(6);
});
});
I hope someone can explain to me how to get the variables from cities into clickable list javascript. Thanks a lot, I deeply appreciate your response!
我希望有人可以向我解释如何将城市中的变量放入可点击列表 javascript 中。非常感谢，非常感谢您的回复！
采纳答案by charlietfl
If you convert the citiesarray to an object like:
如果将cities数组转换为对象，例如：
var cities = {
'Groningen': [ 53.216723950863425, 6.560211181640625, 4],
'San Francisco': [ 34.01131647557699, -118.25599389648437, 5],
'New York City': [ 40.7143528, -74.0059731, 3]
};
And add a data-attribute with matching city name along with a common class name to each of the links:
data-并向每个链接添加一个具有匹配城市名称的属性以及一个公共类名称：
/* not sure what html looks like , using pseudo "tagName"*/
<tagName class="map_link" data-city="Groningen">Groningen</tagName>
You can create one handler for the whole class:
您可以为整个班级创建一个处理程序：
$("#contacts").on("click", ".map_link", function() {
/* "this" within handler is the actual element clciked*/
/* find correct array from "cities" object */
var data=cities[ $(this).data('city') ]; /* returns array[ 53.21, 6.56, 4]*/
var laLatLng = new google.maps.LatLng( data[0], data[1]);
map.panTo(laLatLng);
map.setZoom( data[2]);
});
回答by adeneo
Here's how I'd do it, simply using the reverse geocoding capabilities of Google Maps to lookup the city names:
这是我的方法，只需使用 Google Maps 的反向地理编码功能来查找城市名称：
<ul id="cities">
<li>San Fransisco</li>
<li>Groningen</li>
<li>New York City</li>
<li>Los Angeles</li>
</ul>
JS
JS
$('#cities li').on('click', function() {
$.ajax({
url: 'http://maps.googleapis.com/maps/api/geocode/json?address='+decodeURIComponent( $(this).text() )+'&sensor=false',
type: 'GET'
}).done(function(data) {
var laLatLng = new google.maps.LatLng(data.results[0].geometry.location.lat, data.results[0].geometry.location.lng);
map.panTo(laLatLng);
map.setZoom(5);
});
});
