Javascript 谷歌地图API:从列表中平移到标记。
你好:)请耐心听我说,我不是一个程序员,但我正在努力从实践中学习。这是我目前正在处理的页面。 我目前使用Google Maps API,使用以下javascript设置了一个地图:Javascript 谷歌地图API:从列表中平移到标记。,javascript,list,maps,panning,Javascript,List,Maps,Panning,你好:)请耐心听我说,我不是一个程序员,但我正在努力从实践中学习。这是我目前正在处理的页面。 我目前使用Google Maps API,使用以下javascript设置了一个地图: function initialize() { var mapOptions = { zoom: 5, center: new google.maps.LatLng(48.160, -6.832), disableDefault
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...
我希望有人能向我解释如何将城市中的变量放入可点击列表javascript。非常感谢,非常感谢您的回复 如果将
城市
数组转换为如下对象:
var cities = {
'Groningen': [ 53.216723950863425, 6.560211181640625, 4],
'San Francisco': [ 34.01131647557699, -118.25599389648437, 5],
'New York City': [ 40.7143528, -74.0059731, 3]
};
并向每个链接添加一个带有匹配城市名称和公共类名的data-
属性:
/* not sure what html looks like , using pseudo "tagName"*/
<tagName class="map_link" data-city="Groningen">Groningen</tagName>
以下是我的做法,只需使用谷歌地图的反向地理编码功能来查找城市名称:
<ul id="cities">
<li>San Fransisco</li>
<li>Groningen</li>
<li>New York City</li>
<li>Los Angeles</li>
</ul>
你想根据城市名称获取各个城市的lat/long吗?是的,那将是理想的:)你太棒了!我要试试看。非常感谢!稍后会回来:)这确实是最好的解决方案,谢谢!您可能还知道如何为每个城市添加标记吗?我正在尝试,但无法让它工作,但也许我会在这个网站上问一个新问题。这个问题现在在这里:再次感谢您的帮助!我想到了这一点,但假设OP可能在每个城市内都有特定的lat/long需要关注,比如当地办事处,而且OP阵列上每个城市的缩放也不同谢谢adeneo的帮助!我尝试了你的解决方案和charlieftl的解决方案,但是正如charlieftl所说的,我也需要得到zoom变量。所以我就选那个:)谢谢!
$("#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]);
});
<ul id="cities">
<li>San Fransisco</li>
<li>Groningen</li>
<li>New York City</li>
<li>Los Angeles</li>
</ul>
$('#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);
});
});