Google Maps v3 API - 根据选择/下拉更新地图位置答案

【问题标题】：Google Maps v3 API - Update map location based on select/dropdownGoogle Maps v3 API - 根据选择/下拉更新地图位置
【发布时间】：2012-01-14 06:39:26
【问题描述】：

您好，我正在尝试使用包含国家/地区列表的下拉菜单 - 一旦选择它应该会自动更新 googlemap 并放大到该位置。

例如如果用户从下拉列表中选择“巴西”，则地图应放大到巴西 - 关于如何进行此操作的任何想法 - 或任何解释这一点的简单教程。

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

【问题讨论】：

你试过地图的panTo(latLng:LatLng)函数吗？

标签： jquery google-maps-api-3 geocoding

【解决方案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);

}

【讨论】：