缩放以搜索(标记)位置Google Maps API

时间:2019-03-20 13:35:39

标签: javascript google-maps google-geocoding-api

当我搜索地址时,我希望地图缩放到搜索(标记)位置。 我一直在浏览论坛并找到建议,但是无法正常工作。

代码示例

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: {lat: 52.0, lng: 1.0}
    });
    var geocoder = new google.maps.Geocoder();

    document.getElementById('submit').addEventListener('click', function() {
      geocodeAddress(geocoder, map);
    });
  }

  function geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('address').value;
        geocoder.geocode({'address': address}, function(results, status) {
            if (status === 'OK') {
            resultsMap.setCenter(results[0].geometry.location);

                var marker = new google.maps.Marker({
                    map: resultsMap,
                    position: results[0].geometry.location
        });

        map.setZoom(14);
        map.panTo(Marker.position);

      } 
      else {
        alert('clever text here: ' + status);
      }
    });

任何想法都将不胜感激。

1 个答案:

答案 0 :(得分:1)

geocodeAddress()函数内部的setZoom(14)无法正常工作,因为您是从错误的地图对象引用中调用的。您应该调用 resultsMap.setZoom(14)而不是map.setZoom(14)。

"map"变量在函数initMap()中声明,并在调用geocodeAddress()函数时作为参数传递:geocodeAddress(geocoder, map)

现在,在geocodeAddress()的方法定义中,地图对象引用已更改为 "resultsMap" 参数名称:function geocodeAddress(geocoder, resultsMap){...}。这就是为什么您必须在geocodeAddress()函数中使用 resultsMap.setZoom(14) 的原因。

这是JSFiddle中的一个工作示例。

希望这会有所帮助!