使用Google Maps v3中的标记返回数据

时间:2014-10-17 09:36:51

标签: api maps

是否可以使用Google Maps v3中的标记返回街道地址,省份,邮政编码(邮政编码),城市和国家/地区?

有时不使用formatted_address返回所有数据。

有没有办法可以返回特定的东西?例如。 return [1] .city,return [1] .country,return [1] .Address ...

1 个答案:

答案 0 :(得分:0)

是。 我写了一个从地理编码器结果中读取组件的函数。

这是一个完整的例子

<!doctype html>
<html>
<head>
  <style>
  #map-canvas {
    width: 500px;
    height: 400px;
  }
  </style>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script>
  function init() {
    var center =  new google.maps.LatLng(50.845464, 4.3571121);  // Brussels
    var geocoder;

    geocoder = new google.maps.Geocoder();
    var map = new google.maps.Map(
      document.getElementById('map-canvas'), {
        center: center,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
      draggable: true,
      title: "Drag me to see the address components",
      map: map,
      position: center
    });

    google.maps.event.addListener(marker, 'dragend', function(e) {
      document.getElementById('display').innerHTML = '';
      var pos = marker.getPosition();
      // get geoposition
      geocoder.geocode({
        latLng: pos
      }, function(responses) {
        if (responses && responses.length > 0) {
          // get postal code
          var postal_code = addresComponent('postal_code', responses[0])
          if (postal_code) {
            document.getElementById('display').innerHTML += '<div>Postal code: ' + postal_code + '</div>';
          }
          // get street
          var street = addresComponent('route', responses[0])
          if (street) {
            document.getElementById('display').innerHTML += '<div>Street: ' + street + '</div>';
          }
          // street number (number of the house in the street)
          var street_number = addresComponent('street_number', responses[0])
          if (street_number) {
            document.getElementById('display').innerHTML += '<div>Street number: ' + street_number + '</div>';
          }
        }
      });
    });
  }
  /**
  *   geocodeResponse is an object full of address data.  
  *   This function will "fish" for the right value
  *   
  *   example: type = 'postal_code' => 
  *   geocodeResponse.address_components[5].types[1] = 'postal_code'
  *   geocodeResponse.address_components[5].long_name = '1000'
  * 
  *   type = 'route' => 
  *   geocodeResponse.address_components[1].types[1] = 'route'
  *   geocodeResponse.address_components[1].long_name = 'Wetstraat'
  */
  function addresComponent(type, geocodeResponse) {
    for(var i=0; i < geocodeResponse.address_components.length; i++) {
      for (var j=0; j < geocodeResponse.address_components[i].types.length; j++) {
        if (geocodeResponse.address_components[i].types[j] == type) {
          return geocodeResponse.address_components[i].long_name;
        }
      }
    }
    return '';
  }
  </script>
</head>
<body onload="init()">
  <div id="map-canvas"></div>
  <div id="display"></div>
  <h3>drag the marker - see some address components</h3>
</body>
</html>