Question

将我的脚趾浸入谷歌地图api（v3）。

首先，我可以使用jquery选择器播种的预填充值初始化地图，如下所示，一切都按预期工作。

我遇到了动态更新这些值的困难。我确定有一个教程或一些例子可以解决这个问题，但经过几天的搜索，我只是无法对其进行排序。

在正确的方向上轻推 - 或者更好的一个明确的例子将非常感激。对于初学者，我根据对mapZoomReturn的更改来更改缩放，但会将其应用于列出的所有var。

非常感谢您的帮助。

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

Answer 1

我终于找到了答案 - 将以下addDomListener添加到initialize函数就可以了。 change是对下拉列表最有用的事件。

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

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

Answer 2

mapZoomReturn需要是一个数字。 val()将返回一个字符串，因此您可以更改为：

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

注意将选择器更改为更有效的ID选择器。

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

https://developers.google.com/maps/documentation/javascript/reference

您可能还会发现jQuery gmaps3插件很有帮助。它是地图API

的绝佳包装器

http://gmap3.net/

谷歌地图api3动态更新用户输入更改

2 个答案: