Question

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

e.g。如果用户从下拉列表中选择“巴西”，那么地图应该放大到巴西 - 有关如何进行此操作的任何想法 - 或任何解释此问题的简单教程。

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

}

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

1 个答案: