Question

我想显示更新地图谷歌位置，具体取决于使用选项“id”从数据库上传的选择列表。我认为我接近预期的结果，但仍无法弄清楚问题的来源。目前的结果是gmap_city保持为空。

<select id="city_list">
<option selected="selected" id="40.7305991000,-73.9865812000" value="2">New York, United States</option>
// here is a query that display the following options
<option id="<?php echo $latlng;?>" value="<?php echo $id;?>"><?php echo $name;?</option>    
</select>


<script>
$('#city_list').change(function(){
    var coordinate = $(this).attr('id');
    google_map(coordinate);
});

function google_map(coordinate){
var latlng = new google.maps.LatLng(coordinate);
var mapOptions = {
    zoom: 11,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('gmap_city'),
    mapOptions);
} 
</script>

<div id="gmap_city" style="margin-left:15px; margin-top:3px; width:540px; height:220px; border:5px solid white;"></div>

感谢您的帮助

Answer 1

该问题涉及2个问题：

$(this).attr('id')是指选择的ID，而不是所选选项的ID
google.maps.LatLng需要2个参数，你必须拆分字符串并传递lat和lng分开

其他问题：

您在每次更改时创建一个新的Map-instance，最好使用一个Map-instance并设置中心onchange
虽然您的ID在HTML5中有效，但您最好使用另一个属性来存储latlng（值可以正确且更容易访问）

<select id="city_list">
<option selected="selected" data-latlng="[43.7305991000,-73.9865812000]" >1</option>
<!--more options-->
</select>
<script>
function google_map(){
  var mapOptions = {
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

  var map = new google.maps.Map(document.getElementById('gmap_city'),
            mapOptions);

  $('#city_list').change(function(){
        var coordinate = $('option:selected',this).data('latlng')
        map.setCenter(new google.maps.LatLng(coordinate[0],coordinate[1]));
    }).trigger('change');
}  
google.maps.event.addDomListener(window, 'load', google_map);
</script>

所选选项ID的谷歌gmap更新

1 个答案: