javascript - 集成 Google map 搜索表单

Question

我正在使用 Google Maps Javascript V3 API 构建搜索表单。执行搜索后，我下面的代码成功传递了地理坐标，但 map 没有更新。我尝试将 codeAddress 函数移到initialize() 内，但搜索按钮不起作用。如何正确整合两者？

HTML:

<form>    
<input type="text" name="address" id="address" />
<input type="button" class="search_button" value="" onclick="codeAddress()" />    
</form>

JavaScript:

var geocoder;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var mapOptions = {
    center: { lat: 48.509532, lng: -122.643852}
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  var locations = <?php echo json_encode($locations_array); ?>;
  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      animation: google.maps.Animation.DROP,
      map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {

        var content = '';
        infowindow.setContent(content);
        infowindow.open(map, marker);
      }
    })(marker, i));
  } 

}

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      alert(results[0].geometry.location);
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      alert('Please try again: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

您的主要问题是您的 map 变量是初始化函数的本地变量，因此它在运行 HTML 点击函数的全局范围内不可用。

一种解决方案:

var geocoder;
var map;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
        center: {
            lat: 48.509532,
            lng: -122.643852
        },
        zoom: 4
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

working fiddle

另一个解决方案:

在初始化函数中定义 codeAddress 并使用 google.maps.event.addDomListener 函数:

google.maps.event.addDomListener(document.getElementsByClassName('search_button')[0],'click',codeAddress);

working fiddle