如何在谷歌地图API中传递位置和半径?

时间:2017-02-17 10:40:40

标签: google-maps

我的目标是通过传递位置参数和特定限制的半径来获取邮政编码列表。

我只获得了位置,但我无法获得某些邮政编码的半径。

https://maps.googleapis.com/maps/api/elevation/json?locations=7034&key=YOUR_API_KEY

如何获取特定半径的邮政编码列表?

请指导我解决这个问题

1 个答案:

答案 0 :(得分:0)

您需要一个包含有关zipcodes数据的数据库。以下是使用包含美国邮政编码的FusionTable的示例:

http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcodeInRadius.html

代码段



google.load('visualization', '1', {
  'packages': ['corechart', 'table', 'geomap']
});
var map;
var labels = [];
var layer;
var tableid = "1VFp4XJEdnR769R2CFRghlmDpUd15dQArpwzcBBs"; //1499916;
var circle;
var geocoder;

function initialize() {
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(37.23032838760389, -118.65234375),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer = new google.maps.FusionTablesLayer({
    query: {
      from: tableid,
      select: "geometry"
    }
  });
  // layer.setQuery("SELECT 'geometry' FROM " + tableid);
  layer.setMap(map);

  codeAddress();

}

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

      var latLng = results[0].geometry.location;
      var radius = parseFloat(document.getElementById('radius').value) * 1609.34;
      if (isNaN(radius)) radius = 5 * 1609.34; // default to 5 miles
      displayZips(results[0].geometry.location, radius);
      if (circle && circle.setMap) {
        circle.setMap(null);
      }
      circle = new google.maps.Circle({
        center: latLng,
        radius: radius,
        map: map
      });
      layer.setQuery({
        select: 'geometry',
        from: tableid,
        where: "ST_INTERSECTS(geometry, CIRCLE(LATLNG(" + latLng.toUrlValue(6) + ")," + radius.toFixed(2) + "))"
      });

    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

function displayZips(latLng, radius) {
  var queryStr = "SELECT geometry, ZIP, latitude, longitude FROM " + tableid + " WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(" + latLng.toUrlValue(6) + ")," + radius.toFixed(2) + "))";
  var queryText = encodeURIComponent(queryStr);
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);

  //set the callback function
  query.send(displayZipText);

}


var infowindow = new google.maps.InfoWindow();

function displayZipText(response) {
  if (!response) {
    alert('no response');
    return;
  }
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  if (map.getZoom() < 11) return;
  FTresponse = response;
  //for more information on the response object, see the documentation
  //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();
  var zipsList = "";
  for (i = 0; i < numRows; i++) {
    var zip = response.getDataTable().getValue(i, 1);
    var zipStr = zip.toString()
    while (zipStr.length < 5) {
      zipStr = '0' + zipStr;
    }
    zipsList += zipStr + " ";
    var point = new google.maps.LatLng(
      parseFloat(response.getDataTable().getValue(i, 2)),
      parseFloat(response.getDataTable().getValue(i, 3)));
  }
  document.getElementById('zips').innerHTML = "zipcodes in radius=" + zipsList;
}
google.maps.event.addDomListener(window, 'load', initialize);
&#13;
html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://www.google.com/jsapi"></script>

<form>
  <span class="style51"><span class="style49">Show</span>:</span>
  <label>Address:</label><input id="address" type="text" value="07646" /><label>Radius:</label><input id="radius" type="text" value="0.5" />
  <input id="geocode" type="button" onclick="codeAddress();" value="Geocode" />
</form>
<div id="zips"></div>
<div id="map_canvas"></div>
&#13;
&#13;
&#13;