反向地理编码示例不显示某些地区的位置的街道名称 [英] Reverse Geocoding example doesn't display the street name of a location in some regions

问题描述

此反向地理编码代码不会返回街道名称（例如：{36.82687,10.09948}），实际上，尽管街道名称在地图上可用，但我只能得到城镇名称和国家名称。我想知道是否有一个技巧来获得这些地区的街道名称？

感谢您的帮助。

解决方案

您引用的示例返回结果数组中第二项（[1]）的formatted_address。最详细的条目通常是第一项（[0]）。如果我改变了代码来使用它，我得到了街道名称。

概念证明小提琴

函数initMap（）{var map = new google.maps.Map（document。 getElementById（'map'），{zoom：8，center：{lat：40.731，lng：-73.997}}）; var geocoder = new google.maps.Geocoder; var infowindow = new google.maps.InfoWindow;函数GeocodeLatLng（地理编码器，地图，infowindow）{var input = document.getElementById（' 。经纬度'）值; var latlngStr = input.split（'，'，2）; var latlng = {lat：parseFloat（latlngStr [0]），lng：parseFloat（latlngStr [1]）}; geocoder.geocode（{'location'：latlng}，function（results，status）{if（status === google.maps.GeocoderStatus.OK）{if（results [0]）{map.setZoom（11）; var marker = new google.maps.Marker（{position：latlng，map：map}）; infowindow.setContent（results [0] .formatted_address）; infowindow.open（map，marker）; map.setCenter（latlng）;} else {window.alert（'No results found'）;}} else {window.alert（'Geocoder failed due to：'+ status）;}}）;} google.maps.event.addDomListener（window，'load'， initMap）;

html，body {height：100％;保证金：0; padding：0;}＃map {height：100％;}＃floating-panel {position：absolute;顶部：10px;左：25％; z-index：5; background-color：#fff;填充：5px;边界：1px固体＃999; text-align：center; font-family：'Roboto'，'sans-serif'; line-height：30px; padding-left：10px;}< / style> <风格> ＃floating-panel {position：absolute; top：5px;剩下：50％; margin-left：-180px; width：350px; z-index：5; background-color：#fff;填充：5px; border：1px solid＃999;}＃latlng {width：225px;}

 < script src =https://maps.googleapis.com/maps/api/js>< / script>< div id =floating-panel> < input id =latlngtype =textvalue =36.82687,10.09948> < input id =submittype =buttonvalue =Reverse Geocode>< / div>< div id =map>< / div>  
 
 
如果你真的只想要街道名称，你不应该依赖结果数组中的条目，你应该遍历第一个（最准确的）条目的结果，寻找类型为 route   address_component  > 
 
 
 概念证明小提琴 
 
 $ b 
 代码段：  
 
 
 
 
 
  var marker; function initMap（）{ var map = new google.maps.Map（document.getElementById（'map'），{zoom：8，center：{lat：40.731，lng：-73.997}}）; var geocoder = new google.maps.Geocoder（）; var infowindow = new google.maps.InfoWindow（）; google.maps.event.addListener（map，'click'，function（evt）{geocodeLatLng（evt.latLng，geocoder，map，infowindow）;}）;函数geocodeLatLngForm（地理编码器，地图，infowindow）{var input = document.getElementById（'）'）;} addEventListener（'click'，function（）{geocodeLatLngForm（geocoder，map，infowindow）;}）;} function document.getElementById 。经纬度'）值; var latlngStr = input.split（'，'，2）; var latlng = {lat：parseFloat（latlngStr [0]），lng：parseFloat（latlngStr [1]）}; geocodeLatLng（latlng，geocoder，map，infowindow）;}函数geocodeLatLng（latlng，geocoder，map，infowindow）{geocoder.geocode（{'location'：latlng}，function（results，status）{if（status === google .maps.GeocoderStatus.OK）{if（results [0]）{map.setZoom（15）; if（marker&& marker.setMap）{marker.setMap（null）;} marker = new google.maps。 Marker（{position：latlng，map：map}）; map.setCenter（latlng）; //找到第一个条目的街道名称var street_name =not available; for（var i = 0; i< results [ 0] .address_components.length; i ++）{for（var j = 0; j< results [0] .address_components [i] .types.length; j ++）{if（results [0] .address_components [i] .types [j] ==route）{street_name = results [0] .address_components [i] .long_name; break;}}} infowindow.setContent（street_name）; info window.open（map，marker）; } else {window.alert（'找不到结果'）; }} else {window.alert（'Geocoder failed：'+ status）; }}）;} google.maps.event.addDomListener（window，'load'，initMap）;  

  html，body {height：100％;保证金：0; padding：0;}＃map {height：100％;}＃floating-panel {position：absolute;顶部：10px;左：25％; z-index：5; background-color：#fff;填充：5px;边界：1px固体＃999; text-align：center; font-family：'Roboto'，'sans-serif'; line-height：30px; padding-left：10px;}< / style> <风格> ＃floating-panel {position：absolute; top：5px;剩下：50％; margin-left：-180px; width：350px; z-index：5; background-color：#fff;填充：5px; border：1px solid＃999;}＃latlng {width：225px;}  

 < script src =https://maps.googleapis.com/maps/api/js>< / script>< div id =floating-panel> < input id =latlngtype =textvalue =36.82687,10.09948> < input id =submittype =buttonvalue =Reverse Geocode>< / div>< div id =map>< / div>  pre> 

This reverse geocoding code does not return the street name of a location in some areas (Example: {36.82687, 10.09948}), actually, I get only the name of the town and the country despite the fact that the name of the street is available on the map. I was wondering if there was a trick to get the streets' names in those regions?

Thanks for your help.

解决方案

The example you reference returns the formatted_address of the 2nd entry ("[1]") in the results array. The most detailed entry is usually the 1st entry ("[0]"). If I change the code to use that, I get the street name.

proof of concept fiddle

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: 40.731,
      lng: -73.997
    }
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodeLatLng(geocoder, map, infowindow);
  });
}

function geocodeLatLng(geocoder, map, infowindow) {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var latlng = {
    lat: parseFloat(latlngStr[0]),
    lng: parseFloat(latlngStr[1])
  };
  geocoder.geocode({
    'location': latlng
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        map.setZoom(11);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
        infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
        map.setCenter(latlng);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
</style> <style> #floating-panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  width: 350px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
#latlng {
  width: 225px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="floating-panel">
  <input id="latlng" type="text" value="36.82687, 10.09948">
  <input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>

If you really only want the street name, you should not depend on the entry in the results array, you should iterate through the results of the first (most exact) entry, looking for the address_component with type route

proof of concept fiddle

code snippet:

var marker;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: 40.731,
      lng: -73.997
    }
  });
  var geocoder = new google.maps.Geocoder();
  var infowindow = new google.maps.InfoWindow();
  google.maps.event.addListener(map, 'click', function(evt) {
    geocodeLatLng(evt.latLng, geocoder, map, infowindow);
  });
  document.getElementById('submit').addEventListener('click', function() {
    geocodeLatLngForm(geocoder, map, infowindow);
  });
}

function geocodeLatLngForm(geocoder, map, infowindow) {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var latlng = {
    lat: parseFloat(latlngStr[0]),
    lng: parseFloat(latlngStr[1])
  };
  geocodeLatLng(latlng, geocoder, map, infowindow);
}

function geocodeLatLng(latlng, geocoder, map, infowindow) {
  geocoder.geocode({
    'location': latlng
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      if (results[0]) {
        map.setZoom(15);
        if (marker && marker.setMap) {
          marker.setMap(null);
        }
        marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
        map.setCenter(latlng);
        // find the street name of the first entry
        var street_name = "not available";
        for (var i = 0; i < results[0].address_components.length; i++) {
          for (var j = 0; j < results[0].address_components[i].types.length; j++) {

            if (results[0].address_components[i].types[j] == "route") {
              street_name = results[0].address_components[i].long_name;
              break;
            }
          }
        }
        infowindow.setContent(street_name);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
</style> <style> #floating-panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  width: 350px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
#latlng {
  width: 225px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="floating-panel">
  <input id="latlng" type="text" value="36.82687, 10.09948">
  <input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>

这篇关于反向地理编码示例不显示某些地区的位置的街道名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！