Google Maps API v3：如何以 2 个动态地址为中心？

Posted 2023-03-05

【中文标题】Google Maps API v3：如何以 2 个动态地址为中心？

【英文标题】：Google Maps API v3: How to center on 2 dynamic addresses?

【发布时间】：2012-08-16 03:13:34

【问题描述】：

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

问题是我对 javascript 和 Google Maps 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>

【问题讨论】：

这是您需要的吗？ ***.com/questions/1556921/…

下载 V2 : ***.com/questions/2831740/…

我需要 V3 并且该链接适用于固定位置/位置。我需要动态

我对@9​​87654323@ 的回答应该适用于这种情况。

【参考方案1】：

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

proof of concept fiddle

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

【讨论】：

以前显示过地图吗？您是否收到 javascript 错误？请提供指向您的地图的链接或显示问题的 jsfiddle。