如何从Google Maps API中获取城市和州名? [英] How can I get just city and state from the Google Maps API?
问题描述
我想从Google API地图搜索中删除国家/地区.例如，我不希望美国佐治亚州的亚特兰大，但我想要佐治亚州的亚特兰大.这可能吗?
I want to remove the country from the Google API map search.For example I don't want Atlanta,GA,USA but I want something like Atlanta,GA. Is this possible?
这是我的代码. Laravel刀片中的表格:
Here is my code. The form in Laravel blade:
{!!Form::open(array('url'=>'search','method'=>'get','id'=>'theform')) !!}
{{Form::text('mywhat','',array('placeholder'=>'Search Business or Keywords','class'=>'form-control f1','size'=>'50%','height'=>'auto','id'=>'whatty','autocomplete'=>'off'))}}
{{Form::text('mywhere','',array('placeholder'=>'City State or ZipCode','class'=>'form-control','height'=>'auto','id'=>'location-input','autocomplete'=>'off'))}}
{{Form::submit('Search', array('class'=>'btn btn-warning bbt','id'=>'button'))}}
{!!Form::close() !!}
JavaScript代码:
The JavaScript code:
<script type="text/javascript">
var searchbox=new google.maps.places.SearchBox(document.getElementById('location-input'));
</script>
推荐答案
我正在尝试做同样的事情...(不在每个城市的末尾显示"，美国" ，状态条目)
I am trying to do the exact same thing... (not show the ', USA' at the end of every city, State entry)
这很有趣，因为我相信它曾经以这种开箱即用的方式工作...请在此处查看开发人员文档中的旧屏幕截图: https://developers.google.com/maps/documentation/javascript/places-autocomplete#map_controls
It's funny because I believe it used to work this way out of the box... see this old screenshot in the developer docs here: https://developers.google.com/maps/documentation/javascript/places-autocomplete#map_controls
但是，如果您转到他们的示例，它就不会以这种方式工作: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-hotelsearch
However if you go to their example it does not work this way: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-hotelsearch
您认为输入"字段对于任何城市都足够长吗?错误的:
Look you thought that Input field was long enough for any city right? wrong:
这是我每次使用MutationObserver删除国家/地区的方法！ 这种方法的灵感来自其他stackoverflow帖子: JS:元素何时可见的事件监听器?
Here is my approach using MutationObserver to remove the Country every time! This approach is inspired by this other stackoverflow post: JS: event listener for when element becomes visible?
更新:现在可以在IE上使用(我已经测试了IE，Edge，Firefox，Chrome)
Update: this now works with IE (I have tested IE, Edge, Firefox, Chrome)
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<div id="findhotels">
Find City State:
</div>
<div id="locationField">
<input id="autocomplete" placeholder="Enter a city" type="text" />
</div>
<script>
var autocomplete;
var addressEle = document.getElementById('autocomplete');
var dropdown;
var times = 0;
function initAutocomplete() {
// Create the autocomplete object and associate it with the UI input control.
// Restrict the search to the default country, and to place type "cities".
autocomplete = new google.maps.places.Autocomplete(
(addressEle), {
types: ['(cities)'],
componentRestrictions: {'country': 'us'}
});
autocomplete.addListener('place_changed', onPlaceChanged);
}
function initAutoObserver(){
dropdown = document.querySelector('div.pac-container.pac-logo');
if( dropdown){
if(times){ console.log( 'IE sucks... recursive called '+times+' times.' ); }
//Literally the ONLY listener google gives us is the 'place_changed' Listener
//So we are having to use a MutationObserver to detect when the dropdown is shown/hidden
//When Dropdown changes, remove ', USA'
var observer = new MutationObserver(function(){
if(dropdown.style.display !='none' ){
//console.log('is visible');
for(var i=0,l=dropdown.children.length; i<l; i++){
var thespan = dropdown.children[i].lastElementChild
thespan.innerHTML = thespan.innerHTML.replace(', USA','');
}
} else {
//console.log('is hidden');
//console.log(addressEle.value);
addressEle.value = addressEle.value.replace(', USA','');
}
});
observer.observe(dropdown, { attributes: true, childList: true });
}else {
//IE seems to take longer to add the dropdown element to the dom:
times++;
setTimeout( initAutoObserver, 20);
}
}
window.addEventListener("load", initAutoObserver );
// When the user selects a city, get the place details for the city
function onPlaceChanged() {
var place = autocomplete.getPlace();
if (place.geometry) {
//console.log(place);
} else {
addressEle.placeholder = 'Enter a city';
}
}
//Prevent Numbers (Allow Only Letters) from Being entered into the City, State Field:
addressEle.addEventListener('input', function (event) {
this.value = this.value.replace(/[^a-zA-Z -,]/g, "");
});
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCvRwR3-fGr8AsnMdzmQVkgCdlWhqUiCG0&libraries=places&callback=initAutocomplete"
async defer></script>
</body>
</html>
这篇关于如何从Google Maps API中获取城市和州名?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
