如何从Google Maps API获取城市和州名？

Question

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. 我想从Google API地图搜索中删除国家/地区。例如，我不希望美国佐治亚州亚特兰大，但我想要佐治亚州亚特兰大。 Is this possible? 这可能吗？

Here is my code. 这是我的代码。 The form in Laravel blade: Laravel刀片中的表格：

{!!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() !!}

The JavaScript code: JavaScript代码：

<script type="text/javascript"> 
   var searchbox=new google.maps.places.SearchBox(document.getElementById('location-input'));
</script>

Answer 1

I am trying to do the exact same thing... (not show the ' , USA ' at the end of every city, State entry) 我正在尝试做完全相同的事情...（在每个城市的末尾都不要显示“ ，USA ”，请输入州名）

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/places-autocomplete#map_controls

However if you go to their example it does not work this way: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-hotelsearch 但是，如果您转到他们的示例，则该方法将无法正常运行： 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: 错误：

Here is my approach using MutationObserver to remove the Country every time! 这是我每次使用MutationObserver删除国家/地区的方法！ This approach is inspired by this other stackoverflow post: JS: event listener for when element becomes visible? 这种方法的灵感来自另一个stackoverflow帖子： JS：何时元素可见的事件侦听器？

Update: this now works with IE (I have tested IE, Edge, Firefox, Chrome) 更新：现在可以在IE上使用（我已经测试了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获取城市和州名？

问题描述

1 个解决方案

解决方案1
0 2018-12-20 19:09:09

如何从Google Maps API获取城市和州名？

问题描述

1 个解决方案

解决方案1 0 2018-12-20 19:09:09

解决方案1
0 2018-12-20 19:09:09