Google地图V3地理编码+缩放 [英] Google Maps V3 Geocode + Zoom

问题描述

我使用Google地图版本2的地理编码服务JavaScript API。
https://developers.google.com/maps/documentation/javascript / v2 / reference
但谷歌决定不再支持他。

注意：Google Maps JavaScript API版本2自2010年5月19日起已正式废弃
。V2 API将继续运行，直到2013年5月19日的
。我们鼓励您将代码迁移到版本3的
地图JavaScript API。

那么我怎样才能在谷歌地图版本3 javascript api中缩放地理代码？

解决方案

要缩放地图以最好地显示地理编码操作的结果，您可以使用

<$ p

$ p> 函数codeAddress （）{
var address = document.getElementById（address）。value;
geocoder.geocode（{'address'：address}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
map.setCenter（results [0] .geometry.location）;
var marker = new google.maps.Marker（{
map：map，
position：results [0] .geometry.location
}）;
if（results [0] .geometry.viewport）
map.fitBounds（results [0] .geometry.viewport）;
} else {
alert（ Geocode由于以下原因而不成功：+ status;
}
}）;



程式码片段：

  var geocoder，map，marker; function codeAddress（）{var address = document.getElementById（address）.value; geocoder.geocode（{'address'：address}，function（results，status）{if（status == google.maps.GeocoderStatus.OK）{map.setCenter（results [0] .geometry.location）; if（marker && marker.setMap）marker.setMap（null）; marker = new google.maps.Marker（{map：map，position：results [0] .geometry.location}）; if（results [0] .geometry .viewport）map.fitBounds（results [0] .geometry.viewport）;} else {alert（Geocode由于以下原因不成功：+ status）;}}）;} function initialize（）{geocoder = new google.maps.Geocoder（）; map = new google.maps.Map（document.getElementById（map_canvas），{mapTypeId：google.maps.MapTypeId.ROADMAP}）; google.maps.event.addDomListener（document.getElementById（'btn'），'click'，codeAddress）; codeAddress（）;} google.maps.event.addDomListener（window，load，initialize）;  

  html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//   

p>


I was using geocode service of Google Maps Version 2 the Javascript API. https://developers.google.com/maps/documentation/javascript/v2/reference However google decided not to support his anymore.

Note: The Google Maps JavaScript API Version 2 has been officially deprecated as of May 19, 2010. The V2 API will continue to work until May 19, 2013. We encourage you to migrate your code to version 3 of the Maps JavaScript API.

So how can I geocode in google maps version 3 javascript api with zoom?

解决方案

To zoom the map to best show the results of the geocoding operation, you can use the google.maps.Map fitBounds method with the viewport property of the result:

function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
                position: results[0].geometry.location
            });
        if (results[0].geometry.viewport) 
          map.fitBounds(results[0].geometry.viewport);
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

code snippet:

var geocoder, map, marker;

function codeAddress() {
  var address = document.getElementById("address").value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      if (marker && marker.setMap) marker.setMap(null);
      marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
      if (results[0].geometry.viewport)
        map.fitBounds(results[0].geometry.viewport);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

function initialize() {
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', codeAddress);
  codeAddress();

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

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="address" value="Palo Alto, CA" />
<input id="btn" value="Geocode" type="button" />
<div id="map_canvas"></div>

这篇关于Google地图V3地理编码+缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！