Google Maps API：從列表中平移到標記。

Question

你好:)請耐心等待，我不是一名編碼員，但我正在努力學習。這是我目前正在處理的頁面; http://www.websu.it/devnw/dev/contact.html。 我目前正在建立一個地圖使用谷歌地圖API，使用下面的JavaScript：

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

然後我創建了一個列表，其中每一個li元素，當在地圖中的一個平移點擊，結果這些標記之一。

我已經添加了下面的代碼，它工作得很好。但這意味着我必須在上面的「城市」代碼數組中添加每個城市的經度/緯度，以及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); 
     }); 
    }); 

我希望有人能向我解釋如何將城市變量轉換爲可點擊列表的javascript。非常感謝，我非常感謝您的回覆！

Answer 1

如果您在cities數組轉換成類似於對象：

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> 

您可以爲整個班級創建一個處理程序：

$("#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]); 
     }); 

Answer 2

這是我怎麼會做呢，簡單地使用谷歌地圖的反向地理編碼功能來查找城市名稱：

<ul id="cities"> 
    <li>San Fransisco</li> 
    <li>Groningen</li> 
    <li>New York City</li> 
    <li>Los Angeles</li> 
</ul> 

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); 
    }); 
}); 

FIDDLE