谷歌地图API v3:如何以2个动态地址为中心

Google Maps API v3: How to center on 2 dynamic addresses?

本文关键字：2个 动态 地址 为中心 API v3 谷歌地图      更新时间：2023-09-26

在过去的8个小时里，我一直在尝试做一些非常简单的事情。

问题是我不太熟悉JavaScript，也不太熟悉谷歌地图API。

我想做的就是找到两个不同位置的中心并相应地缩放

2地址通常是普通的，因为用户会输入信息。

我的所有搜索都在API v2或固定位置上结束。

有人能帮帮我吗？

我真的很感激！

提前感谢！！！

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&region=BR"></script>
<script>
  var geocoder;
  var map;
  var query = "<?php echo $endCercompleto; ?>";
  var query2 = "<?php echo $endFescompleto; ?>";
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
      zoom:8,
      center: new google.maps.LatLng(0, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        codeAddress();
  }
  function codeAddress() {
    var address = query;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
    var address2 = query2;
    geocoder.geocode( { 'address': address2}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var marker2 = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
</script>

这应该可以工作。请注意，每个地理编码器回调例程中的bounds.extend和map.fitBounds。你不知道哪个会先完成。

概念验证小提琴

<script src="https://maps.googleapis.com/maps/api/js?region=BR"></script>
<script>
  var geocoder;
  var bounds = new google.maps.LatLngBounds();
  var map;
  var query = "<?php echo $endCercompleto; ?>";
  var query2 = "<?php echo $endFescompleto; ?>";
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
      zoom:8,
      center: new google.maps.LatLng(0, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        codeAddress();
  }
  function codeAddress() {
    var address = query;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        bounds.extend(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
        });
        map.fitBounds(bounds);
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
    var address2 = query2;
    geocoder.geocode( { 'address': address2}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        bounds.extend(results[0].geometry.location);
        var marker2 = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
        });
        map.fitBounds(bounds);
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
}
</script>
相关文章：