0

我想根据使用选项“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>

谢谢你的帮助

4

1 回答 1

0

该问题有2个问题：

  1. $(this).attr('id')指的是select的id，而不是选择的option的id
  2. google.maps.LatLng需要 2 个参数，您必须拆分字符串并分别传递 lat 和 lng

其他问题：

  1. 您在每次更改时创建一个新的地图实例，您最好使用单个地图实例并设置中心onchange
  2. 尽管您的 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>
于 2013-10-15T19:48:57.163 回答