2017-12-15 2 views
0

Kann mir jemand sagen, ob in Google Maps Search API möglich ist, wenn Sie Stadtnamen in Ihrer eigenen Sprache suchen, um den Namen der Stadt immer in Englisch zurückzugeben?Google Maps Suche API

kann also sagen, dass Sie Namen der Stadt in der russischen geben, aber Sie wollen in Englisch Sprache Stadt Namen

+0

Ich glaube nicht. Ich nehme an, dass es eine Google Translate API gibt, die Sie verwenden könnten. Könnte total falsch sein, tho. –

Antwort

0

zurückzukehren Wenn ich richtig Ihren Anwendungsfall zu verstehen, ich denke, das ist machbar eine Abhilfe verwenden. Sie suchen beispielsweise nach "St. Petersburg"(eine Stadt in Russland). Der russische Name dieser Stadt wäre "Санкт-Петербург" gemäß Google Translate.

Mit Google Maps Javascript API Places search box, können Sie den Wert der Variablen Orte loggt sein. Damit können Sie nun die zurückgegebenen Ergebnisse sehen, nachdem das Ereignis "orders_changed" ausgelöst wurde.

Hier ist ein Beispiel-Ergebnis:

"result" : { 
     "address_components" : [ 
     { 
      "long_name" : "Saint Petersburg", 
      "short_name" : "Saint Petersburg", 
      "types" : [ "administrative_area_level_1", "political" ] 
     }, 
     { 
      "long_name" : "Saint Petersburg", 
      "short_name" : "Saint Petersburg", 
      "types" : [ "administrative_area_level_2", "political" ] 
     }, 
     { 
      "long_name" : "Russia", 
      "short_name" : "RU", 
      "types" : [ "country", "political" ] 
     } 
     ], 
     "adr_address" : "\u003cspan class=\"region\"\u003eSaint Petersburg\u003c/span\u003e, \u003cspan class=\"country-name\"\u003eRussia\u003c/span\u003e", 
     "formatted_address" : "Saint Petersburg, Russia" 
... 
} 

Sie diese Eigenschaften fest: „address_components“ und „formatted_address“ hat die Adresse, die in Englisch Sprache.

Wenn Sie über die Adresse in Ihrem Suchfeld nicht in englischer Sprache besorgt sind, können Sie dies ändern, indem Sie die Schlüssel/Werte address_components oder format_address analysieren und dann als Wert für das Suchfeld festlegen.

Beispielimplementierung:

document.getElementById('pac-input').value = places[0].formatted_address; 

Arbeits Demo unter:

 // This example adds a search box to a map, using the Google Place Autocomplete 
 
     // feature. People can enter geographical searches. The search box will return a 
 
     // pick list containing a mix of places and predicted search terms. 
 

 
     // This example requires the Places library. Include the libraries=places 
 
     // parameter when you first load the API. For example: 
 
     // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> 
 

 
     function initAutocomplete() { 
 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      center: {lat: -33.8688, lng: 151.2195}, 
 
      zoom: 13, 
 
      mapTypeId: 'roadmap' 
 
     }); 
 

 
     // Create the search box and link it to the UI element. 
 
     var input = document.getElementById('pac-input'); 
 
     var searchBox = new google.maps.places.SearchBox(input); 
 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
 

 
     // Bias the SearchBox results towards current map's viewport. 
 
     map.addListener('bounds_changed', function() { 
 
      searchBox.setBounds(map.getBounds()); 
 
     }); 
 

 
     var markers = []; 
 
     // Listen for the event fired when the user selects a prediction and retrieve 
 
     // more details for that place. 
 
     searchBox.addListener('places_changed', function() { 
 
      var places = searchBox.getPlaces(); 
 
      console.log(places); 
 
      if (places.length == 0) { 
 
      return; 
 
      } 
 
      document.getElementById('pac-input').value = places[0].formatted_address; 
 
      // Clear out the old markers. 
 
      markers.forEach(function(marker) { 
 
      marker.setMap(null); 
 
      }); 
 
      markers = []; 
 

 
      // For each place, get the icon, name and location. 
 
      var bounds = new google.maps.LatLngBounds(); 
 
      places.forEach(function(place) { 
 
      if (!place.geometry) { 
 
       console.log("Returned place contains no geometry"); 
 
       return; 
 
      } 
 
      var icon = { 
 
       url: place.icon, 
 
       size: new google.maps.Size(71, 71), 
 
       origin: new google.maps.Point(0, 0), 
 
       anchor: new google.maps.Point(17, 34), 
 
       scaledSize: new google.maps.Size(25, 25) 
 
      }; 
 

 
      // Create a marker for each place. 
 
      markers.push(new google.maps.Marker({ 
 
       map: map, 
 
       icon: icon, 
 
       title: place.name, 
 
       position: place.geometry.location 
 
      })); 
 

 
      if (place.geometry.viewport) { 
 
       // Only geocodes have viewport. 
 
       bounds.union(place.geometry.viewport); 
 
      } else { 
 
       bounds.extend(place.geometry.location); 
 
      } 
 
      }); 
 
      map.fitBounds(bounds); 
 
     }); 
 
     }
#map { 
 
     height: 100%; 
 
     } 
 
     /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #description { 
 
     font-family: Roboto; 
 
     font-size: 15px; 
 
     font-weight: 300; 
 
     } 
 

 
     #infowindow-content .title { 
 
     font-weight: bold; 
 
     } 
 

 
     #infowindow-content { 
 
     display: none; 
 
     } 
 

 
     #map #infowindow-content { 
 
     display: inline; 
 
     } 
 

 
     .pac-card { 
 
     margin: 10px 10px 0 0; 
 
     border-radius: 2px 0 0 2px; 
 
     box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
     outline: none; 
 
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
 
     background-color: #fff; 
 
     font-family: Roboto; 
 
     } 
 

 
     #pac-container { 
 
     padding-bottom: 12px; 
 
     margin-right: 12px; 
 
     } 
 

 
     .pac-controls { 
 
     display: inline-block; 
 
     padding: 5px 11px; 
 
     } 
 

 
     .pac-controls label { 
 
     font-family: Roboto; 
 
     font-size: 13px; 
 
     font-weight: 300; 
 
     } 
 

 
     #pac-input { 
 
     background-color: #fff; 
 
     font-family: Roboto; 
 
     font-size: 15px; 
 
     font-weight: 300; 
 
     margin-left: 12px; 
 
     padding: 0 11px 0 13px; 
 
     text-overflow: ellipsis; 
 
     width: 400px; 
 
     } 
 

 
     #pac-input:focus { 
 
     border-color: #4d90fe; 
 
     } 
 

 
     #title { 
 
     color: #fff; 
 
     background-color: #4d90fe; 
 
     font-size: 25px; 
 
     font-weight: 500; 
 
     padding: 6px 12px; 
 
     } 
 
     #target { 
 
     width: 345px; 
 
     }
<input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
 
<div id="map"></div> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&libraries=places&language=en&callback=initAutocomplete" 
 
     async defer></script>

Und das ist es. Happy Coding und Goodluck auf Ihrem Projekt.