2015-10-19 99 views
1

如何使用place_id獲取州和城市。我想用place_id獲取州和城市。牛逼如何在Angularjs的Google Map Api中使用placeid獲取州和城市

請參閱下面的鏈接Google_map,我希望得到以下place_id 「place_id」的州和城市:「ChIJLfyY2E4UrjsRVq4AjI7zgRY」,

+0

國家和城市都在地方API響應返回不詳細,所以我不知道你是否能始終如一地檢索它們。你可以嘗試從地址解析它,但這可能是不可靠的。 – Andy

回答

2

Google Place Details response包含address_components[] field代表用來組成單獨的地址組件陣列一個給定的地址,你可以從這個屬性中提取城市和州。

根據Address Component Types

  • administrative_area_level_1 - 表示國家等級之下的第一順位政治實體。在美國境內,這些行政級別是州。並非所有國家都顯示出這些行政級別 。
  • locality - 表示合併的城市或城鎮政治實體。

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 10 
 
    }); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 
    var service = new google.maps.places.PlacesService(map); 
 

 
    service.getDetails({ 
 
     placeId: 'ChIJLfyY2E4UrjsRVq4AjI7zgRY' 
 
    }, function (place, status) { 
 
     if (status === google.maps.places.PlacesServiceStatus.OK) { 
 
      map.setCenter(place.geometry.location); 
 
      /*var marker = new google.maps.Marker({ 
 
       map: map, 
 
       position: place.geometry.location 
 
      });*/ 
 
      showPlaceDetails(map, place, infowindow); 
 
     } 
 
    }); 
 
} 
 

 

 
function showPlaceDetails(map, place, infowindow) { 
 
    //parse address details 
 
    var info = ''; 
 
    place.address_components.forEach(function (item) { 
 
     if (item.types.indexOf("administrative_area_level_1") > -1) { 
 
      info += '<div>State: ' + item.long_name + '</div>'; 
 
     } 
 
     if (item.types.indexOf("locality") > -1) { 
 
      info += '<div>City: ' + item.long_name + '</div>'; 
 
     } 
 
    }); 
 
    infowindow.setContent(info); 
 
    infowindow.setPosition(place.geometry.location); 
 
    infowindow.open(map); 
 
}
html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#map { 
 
    height: 100%; 
 
}
<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>

+0

該實施使用Javascript。但我需要Angular-Google-Map – geeks

相關問題