将Google地图中心转到用户位置

时间:2017-05-03 23:55:54

标签: google-maps

<script>
  function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      scrollwheel: false,
    });

    var geocoder = new google.maps.Geocoder();

    var addresses = ['Dallas', 'Chicago', 'Jonesboro','Las Vegas','Austin','Memphis'];

    for (var x = 0; x < addresses.length; x++) {
      geocodeAddress(geocoder, addresses[x], map);
    }


     if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(function (position) {
             initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
             map.setCenter(initialLocation);
         });
     }

  }

  function geocodeAddress(geocoder, address, resultsMap) {
    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
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }
</script>

我正在尝试将地图集中到用户的位置。如果我删除geocodeAddress(geocoder, addresses[x], map);,它会完美运行,如果我保留它,地图中心将是最新创建的标记。

1 个答案:

答案 0 :(得分:0)

如果您不希望它以geocodeAddress调用的结果为中心,请删除执行此操作的代码:

// centers map on result
resultsMap.setCenter(results[0].geometry.location);

全功能:

 function geocodeAddress(geocoder, address, resultsMap) {
    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
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

proof of concept fiddle

代码段

&#13;
&#13;
function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    scrollwheel: false,
    // note that without a center, the map will not be initialized and will be grey
    center: {
      lat: 37.09024,
      lng: -95.712891
    }
  });

  var geocoder = new google.maps.Geocoder();

  var addresses = ['Dallas', 'Chicago', 'Jonesboro', 'Las Vegas', 'Austin', 'Memphis'];

  for (var x = 0; x < addresses.length; x++) {
    geocodeAddress(geocoder, addresses[x], map);
  }


  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      map.setCenter(initialLocation);
    });
  }

}

function geocodeAddress(geocoder, address, resultsMap) {
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === 'OK') {
      var marker = new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}
google.maps.event.addDomListener(window, "load", initMap);
&#13;
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
&#13;
&#13;
&#13;