Jquery google maps api3随用户输入更改而动态更新

我正在深入研究谷歌地图api（v3）

首先，我可以用jquery选择器预先填充的值来初始化地图，如下所示，一切正常

我很难动态更新这些值。我肯定有一个教程或一些例子，去了这个地方，但经过几天的搜索，我只是无法整理出来

朝着正确的方向轻推——或者最好是举个明确的例子。对于初学者，在基于mapZoomReturn的更改更改缩放后，Im将应用于列出的所有变量

非常感谢你的帮助

<script>
//set up variables to contain our input values
var mapIdReturn = null;
var mapZoomReturn = null;
var mapWidthReturn = null;
var mapHeightReturn = null;
var mapTypeReturn = null;
var mapAddressReturn = null;
var mapAddressElement = null;
var mapMarkerReturn = null;
var mapInfoWindowReturn = null;
var infowindowPlace = null;
var mapMarkerImageReturn = null;
var mapKMLReturn = null;
var map = null;
var mapOptions = null;
var tr_gmaps = null;
var output = null;

jQuery(document).ready(function(jQuery) {
    // populate initial values
    mapIdReturn = jQuery('input[id=mapId]').val();
    mapZoomReturn = jQuery('select[id=mapZoom]').val();
    mapWidthReturn = jQuery('input[id=mapWidth]').val();
    mapHeightReturn = jQuery('input[id=mapHeight]').val();
    mapTypeReturn = jQuery('select[id=mapType]').val();
    mapAddressReturn = jQuery('input[id=mapAddress]').val();
    mapMarkerReturn = jQuery('select[id=mapMarker]').val();
    mapInfoWindowReturn = jQuery('textarea[id=mapInfoWindow]').val();
    mapMarkerImageReturn = jQuery('input[id=mapMarkerImage]').val();
    mapKMLReturn = jQuery('input[id=mapKML]').val();
});

function initialize() {
            // my start
    //mapZoomReturn = jQuery('select[id=mapZoom]').change(function(event){ jQuery(this).val(); });

    mapOptions = {
      center: new google.maps.LatLng(43.703793, -72.326187),
      zoom: parseFloat(mapZoomReturn),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var input = document.getElementById('mapAddress');
    var autocomplete = new google.maps.places.Autocomplete(input);
    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
      map: map
    });

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      //setTypes([]);
      infowindow.close();
      marker.setVisible(false);
      input.className = '';
      var place = autocomplete.getPlace();
      if (!place.geometry) {
        // Inform the user that the place was not found and return.
        input.className = 'notfound';
        return;
      }
      // If the place has a geometry, then present it on a map.
      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(parseFloat(mapZoomReturn));
      }
      var image = new google.maps.MarkerImage(
          place.icon,
          new google.maps.Size(71, 71),
          new google.maps.Point(0, 0),
          new google.maps.Point(17, 34),
          new google.maps.Size(35, 35));
      marker.setIcon(image);
      marker.setPosition(place.geometry.location);
      var icon = null;
      var address = null;
      var phone = null;
      var web = null;
      if (place.address_components) {
      //console.log(place.address_components);
        icon = place.icon;
        address = place.formatted_address;
        phone   = place.formatted_phone_number;
        web = place.website;
      }
      infowindowPlace = '<div class="marker inside">';
      infowindowPlace += (icon !== null && icon !== undefined) ? '<img src="' + icon + '" class="marker icon"/>' : '';
      infowindowPlace += '<strong>' + place.name + '</strong><br>';
      infowindowPlace += (address !== null && address !== undefined) ? address + '<br>' : '';
      infowindowPlace += (phone !== null && phone !== undefined) ? phone + '<br>' : '';
      infowindowPlace += (web !== null && web !== undefined) ? '<a href="' + web +'" class="" target="_blank">'+ web +'</a><br>' : '';
      infowindowPlace += (mapInfoWindowReturn !== null && mapInfoWindowReturn !==undefined) ? '<span class="marker extras">' + mapInfoWindowReturn + '</span>' : '';
      infowindowPlace +=  '</div>';
      infowindowPlace += '<a href="' + place.url +'" class="marker jumplink" target="_blank">external map</a>';
      infowindow.setContent(infowindowPlace);
      infowindow.open(map, marker);
    });
}
</script>

//设置变量以包含输入值
var mapIdReturn=null；
var mapZoomReturn=null；
var mapWidthReturn=null；
var mapHeightReturn=null；
var mapTypeReturn=null；
var mapAddressReturn=null；
var mapAddressElement=null；
var mapmarkereturn=null；
var mapInfoWindowReturn=null；
var infowindowPlace=null；
var mapMarkerImageReturn=null；
var mapKMLReturn=null；
var-map=null；
var-mapOptions=null；
var tr_gmaps=null；
var输出=null；
jQuery（文档）.ready（函数）（jQuery）{
//填充初始值
mapIdReturn=jQuery（'input[id=mapId]'）。val（）；
mapZoomReturn=jQuery（'select[id=mapZoom]'）。val（）；
mapWidthReturn=jQuery（'input[id=mapWidth]'）。val（）；
mapHeightReturn=jQuery（'input[id=mapHeight]'）。val（）；
mapTypeReturn=jQuery（'select[id=mapType]'））.val（）；
mapAddressReturn=jQuery（'input[id=mapAddress]'）。val（）；
mapmarkereturn=jQuery（'select[id=mapMarker]'）。val（）；
MapInfo WindowReturn=jQuery（'textarea[id=MapInfo Window]'）。val（）；
mapMarkerImageReturn=jQuery（'input[id=mapMarkerImage]'）。val（）；
mapKMLReturn=jQuery（'input[id=mapKML]'）。val（）；
});
函数初始化（）{
//我的开始
//mapZoomReturn=jQuery（'select[id=mapZoom]'）.change（函数（事件）{jQuery（this.val（）；}）；
映射选项={
中心：新google.maps.LatLng（43.703793，-72.326187），
缩放：parseFloat（mapZoomReturn），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map_canvas'），mapOptions）；
var input=document.getElementById（'mapAddress'）；
var autocomplete=new google.maps.places.autocomplete（输入）；
var infowindow=new google.maps.infowindow（）；
var marker=new google.maps.marker({
地图：地图
});
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
//集合类型（[]）；
infowindow.close（）；
marker.setVisible（假）；
input.className=''；
var place=autocomplete.getPlace（）；
如果（！place.geometry）{
//通知用户未找到该位置并返回。
input.className='notfound'；
返回；
}
//如果该地点有几何图形，则将其显示在地图上。
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图。设置中心（地点。几何。位置）；
setZoom（parseFloat（mapZoomReturn））；
}
var image=new google.maps.MarkerImage(
place.icon，
新谷歌地图大小（71,71），
新的google.maps.Point（0,0），
新谷歌地图点（17,34），
新google.maps.Size（35,35））；
marker.setIcon（图像）；
标记器.设置位置（位置.几何.位置）；
var-icon=null；
var地址=null；
var phone=null；
var-web=null；
if（位置、地址和组件）{
//console.log（位置、地址和组件）；
icon=place.icon；
地址=place.formatted\u地址；
phone=place.formatted\u phone\u number；
web=place.website；
}
infowindowPlace=''；
infowindowPlace+=（图标！==null&&icon！==未定义）？“”；
infowindowPlace+=''+place.name+'
'；
infowindowPlace+=（地址！==null&&address！==未定义）？地址+“
”：”；
infowindowPlace+=（电话！==null&&phone！==未定义）？电话+“
”：“”；
infowindowPlace+=（web！==null&&web！==未定义）？“
”：”；
infowindowPlace+=（MapInfo WindowReturn！==null&&MapInfo WindowReturn！==未定义）？“”+MapInfo WindowReturn+“”；
infowindowPlace+=''；
infowindowPlace+=''；
setContent（infowindowPlace）；
信息窗口。打开（地图、标记）；
});
}

mapZoomReturn

必须是一个数字

val（）

将返回一个字符串，因此您可以更改为：

mapZoomReturn = parseInt( jQuery('#mapZoom').val(), 10);

请注意，将选择器更改为更高效的ID选择器

您可能还需要将其他值更改为数字。您可以在API中找到所有映射方法：

您可能还会发现jQueryGMAPS3插件非常有用。这是一个很好的maps API包装器

---

我终于找到了答案-将下面的addDomListener添加到initialize函数就可以了<代码>更改是下拉列表中最有用的事件

    google.maps.event.addDomListener(document.getElementById('mapZoom'),
        'change', function() {
        var mapZoomReturn = parseInt(jQuery('select[id=mapZoom]').val(), 10);
        var mapCurrCenter = map.getCenter(); // center on present location
        map.setZoom(mapZoomReturn);
        map.setCenter(mapCurrCenter);
    }

---

我的下一个任务是在用户使用地图gui更改地图缩放时更新选项select DOM元素

感谢您提供了重新解析的提示-这不是问题，因为我稍后在初始化脚本

map.setZoom（parseFloat（mapZoomReturn））

中对其进行了转换。我真的必须求助于另一个插件来动态更新这些值吗？我希望有人能给我指出一种向这些输入中添加监听器的方法——我真的无法理解文档的意义，因为可以理解的是，它是围绕地图本身中的事件进行的——而不是围绕地图之外的事件。gmap3插件确实让编码变得简单了很多……由您决定