谷歌地图API第3版 - 基于选择/下拉

Question

您好我想使用含有国家名单的下拉菜单更新地图上的位置。

例如如果用户从下拉列表中选择'巴西'，那么地图应该放大到巴西 - 关于如何解决这个问题的任何想法 - 或任何简单的教程来解释这一点。

geocoder = new google.maps.Geocoder(); 
    console.log(geocoder);   
    geocoder.getLatLng(
     'Brazil', 
     function(point) { 
      if (point !== null) { 
       console.log(point); 
       centre = point; 
      } 
     } 
    ); 

Answer 1

您需要一个带有地理坐标值的下拉菜单。如果下拉改变，它会调用谷歌地图功能。

<form> 
    <select class="target">  
     <option value="2,3" selected="selected">Brazil</option> 
     <option value="4,3">China</option> 
    </select> 
</form> 

jQuery的

$('.target').change(function() { 
    var coordinate = $('select option:selected').val(); 
    google_map(coordinate); 
}); 


function google_map(coordinate) { 
    var latlng = new google.maps.LatLng(coordinate); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

}