Google 地图API: 获取机场名称
Google Maps API: Get airport name
当我搜索机场时,我得到这样的结果:
点击第一个结果,“拉瓜迪亚机场 (LGA)”,但是给我这个地方结果:
{
"address_components": [
{
"long_name": "New York",
"short_name": "New York",
"types": [
"locality",
"political"
]
},
{
"long_name": "East Elmhurst",
"short_name": "East Elmhurst",
"types": [
"neighborhood",
"political"
]
},
{
"long_name": "Queens",
"short_name": "Queens",
"types": [
"sublocality_level_1",
"sublocality",
"political"
]
},
{
"long_name": "Queens County",
"short_name": "Queens County",
"types": [
"administrative_area_level_2",
"political"
]
},
{
"long_name": "New York",
"short_name": "NY",
"types": [
"administrative_area_level_1",
"political"
]
},
{
"long_name": "United States",
"short_name": "US",
"types": [
"country",
"political"
]
},
{
"long_name": "11371",
"short_name": "11371",
"types": [
"postal_code"
]
}
],
"formatted_address": "New York, Queens, NY 11371, USA",
"vicinity": "New York",
"html_attributions": []
}
“LaGuardia Airport”和“LGA”均不在结果中。
如何获取地点名称?
这是我的代码的要点:
const autocomplete = new gmaps.places.Autocomplete(addressInput, {}); // {types: ['address']}
autocomplete.setFields(['address_component','formatted_address','vicinity']);
autocomplete.addListener('place_changed', () => {
let place = autocomplete.getPlace();
if (place.address_components && place.address_components.length) {
console.log(JSON.stringify(place, null, 2))
}
}
地点的“名称”(在您的例子中是“拉瓜迪亚机场”)在地点对象的名称属性中。
name optional
Type: string optional
The Place’s name.
如果您查看文档中 Google 的自动完成示例:
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
infowindowContent.children["place-name"].textContent = place.name;
您将在单击该条目时创建的标记的信息窗口中看到它。
代码片段:
// 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=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=places">
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: 40.749933,
lng: -73.98633
},
zoom: 13,
});
const card = document.getElementById("pac-card");
const input = document.getElementById("pac-input");
const biasInputElement = document.getElementById("use-location-bias");
const strictBoundsInputElement = document.getElementById("use-strict-bounds");
const options = {
fields: ["formatted_address", "geometry", "name"],
strictBounds: false,
types: ["establishment"],
};
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
const autocomplete = new google.maps.places.Autocomplete(input, options);
// Bind the map's bounds (viewport) property to the autocomplete object,
// so that the autocomplete requests use the current map bounds for the
// bounds option in the request.
autocomplete.bindTo("bounds", map);
const infowindow = new google.maps.InfoWindow();
const infowindowContent = document.getElementById("infowindow-content");
infowindow.setContent(infowindowContent);
const marker = new google.maps.Marker({
map,
anchorPoint: new google.maps.Point(0, -29),
});
autocomplete.addListener("place_changed", () => {
infowindow.close();
marker.setVisible(false);
const place = autocomplete.getPlace();
console.log(JSON.stringify(place))
if (!place.geometry || !place.geometry.location) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
infowindowContent.children["place-name"].textContent = place.name;
infowindowContent.children["place-address"].textContent =
place.formatted_address;
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
const radioButton = document.getElementById(id);
radioButton.addEventListener("click", () => {
autocomplete.setTypes(types);
input.value = "";
});
}
setupClickListener("changetype-all", []);
setupClickListener("changetype-address", ["address"]);
setupClickListener("changetype-establishment", ["establishment"]);
setupClickListener("changetype-geocode", ["geocode"]);
biasInputElement.addEventListener("change", () => {
if (biasInputElement.checked) {
autocomplete.bindTo("bounds", map);
} else {
// User wants to turn off location bias, so three things need to happen:
// 1. Unbind from map
// 2. Reset the bounds to whole world
// 3. Uncheck the strict bounds checkbox UI (which also disables strict bounds)
autocomplete.unbind("bounds");
autocomplete.setBounds({
east: 180,
west: -180,
north: 90,
south: -90
});
strictBoundsInputElement.checked = biasInputElement.checked;
}
input.value = "";
});
strictBoundsInputElement.addEventListener("change", () => {
autocomplete.setOptions({
strictBounds: strictBoundsInputElement.checked,
});
if (strictBoundsInputElement.checked) {
biasInputElement.checked = strictBoundsInputElement.checked;
autocomplete.bindTo("bounds", map);
}
input.value = "";
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#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;
}
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div class="pac-card" id="pac-card">
<div>
<div id="title">Autocomplete search</div>
<div id="type-selector" class="pac-controls">
<input type="radio" name="type" id="changetype-all" checked="checked" />
<label for="changetype-all">All</label>
<input type="radio" name="type" id="changetype-establishment" />
<label for="changetype-establishment">Establishments</label>
<input type="radio" name="type" id="changetype-address" />
<label for="changetype-address">Addresses</label>
<input type="radio" name="type" id="changetype-geocode" />
<label for="changetype-geocode">Geocodes</label>
</div>
<br />
<div id="strict-bounds-selector" class="pac-controls">
<input type="checkbox" id="use-location-bias" value="" checked />
<label for="use-location-bias">Bias to map viewport</label>
<input type="checkbox" id="use-strict-bounds" value="" />
<label for="use-strict-bounds">Strict bounds</label>
</div>
</div>
<div id="pac-container">
<input id="pac-input" type="text" placeholder="Enter a location" value="airport" />
</div>
</div>
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span><br />
<span id="place-address"></span>
</div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places&v=weekly&channel=2" async></script>
</body>
</html>
当我搜索机场时,我得到这样的结果:
点击第一个结果,“拉瓜迪亚机场 (LGA)”,但是给我这个地方结果:
{
"address_components": [
{
"long_name": "New York",
"short_name": "New York",
"types": [
"locality",
"political"
]
},
{
"long_name": "East Elmhurst",
"short_name": "East Elmhurst",
"types": [
"neighborhood",
"political"
]
},
{
"long_name": "Queens",
"short_name": "Queens",
"types": [
"sublocality_level_1",
"sublocality",
"political"
]
},
{
"long_name": "Queens County",
"short_name": "Queens County",
"types": [
"administrative_area_level_2",
"political"
]
},
{
"long_name": "New York",
"short_name": "NY",
"types": [
"administrative_area_level_1",
"political"
]
},
{
"long_name": "United States",
"short_name": "US",
"types": [
"country",
"political"
]
},
{
"long_name": "11371",
"short_name": "11371",
"types": [
"postal_code"
]
}
],
"formatted_address": "New York, Queens, NY 11371, USA",
"vicinity": "New York",
"html_attributions": []
}
“LaGuardia Airport”和“LGA”均不在结果中。
如何获取地点名称?
这是我的代码的要点:
const autocomplete = new gmaps.places.Autocomplete(addressInput, {}); // {types: ['address']}
autocomplete.setFields(['address_component','formatted_address','vicinity']);
autocomplete.addListener('place_changed', () => {
let place = autocomplete.getPlace();
if (place.address_components && place.address_components.length) {
console.log(JSON.stringify(place, null, 2))
}
}
地点的“名称”(在您的例子中是“拉瓜迪亚机场”)在地点对象的名称属性中。
name optional
Type: string optional
The Place’s name.
如果您查看文档中 Google 的自动完成示例: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
infowindowContent.children["place-name"].textContent = place.name;
您将在单击该条目时创建的标记的信息窗口中看到它。
代码片段:
// 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=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=places">
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: 40.749933,
lng: -73.98633
},
zoom: 13,
});
const card = document.getElementById("pac-card");
const input = document.getElementById("pac-input");
const biasInputElement = document.getElementById("use-location-bias");
const strictBoundsInputElement = document.getElementById("use-strict-bounds");
const options = {
fields: ["formatted_address", "geometry", "name"],
strictBounds: false,
types: ["establishment"],
};
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
const autocomplete = new google.maps.places.Autocomplete(input, options);
// Bind the map's bounds (viewport) property to the autocomplete object,
// so that the autocomplete requests use the current map bounds for the
// bounds option in the request.
autocomplete.bindTo("bounds", map);
const infowindow = new google.maps.InfoWindow();
const infowindowContent = document.getElementById("infowindow-content");
infowindow.setContent(infowindowContent);
const marker = new google.maps.Marker({
map,
anchorPoint: new google.maps.Point(0, -29),
});
autocomplete.addListener("place_changed", () => {
infowindow.close();
marker.setVisible(false);
const place = autocomplete.getPlace();
console.log(JSON.stringify(place))
if (!place.geometry || !place.geometry.location) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
infowindowContent.children["place-name"].textContent = place.name;
infowindowContent.children["place-address"].textContent =
place.formatted_address;
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
const radioButton = document.getElementById(id);
radioButton.addEventListener("click", () => {
autocomplete.setTypes(types);
input.value = "";
});
}
setupClickListener("changetype-all", []);
setupClickListener("changetype-address", ["address"]);
setupClickListener("changetype-establishment", ["establishment"]);
setupClickListener("changetype-geocode", ["geocode"]);
biasInputElement.addEventListener("change", () => {
if (biasInputElement.checked) {
autocomplete.bindTo("bounds", map);
} else {
// User wants to turn off location bias, so three things need to happen:
// 1. Unbind from map
// 2. Reset the bounds to whole world
// 3. Uncheck the strict bounds checkbox UI (which also disables strict bounds)
autocomplete.unbind("bounds");
autocomplete.setBounds({
east: 180,
west: -180,
north: 90,
south: -90
});
strictBoundsInputElement.checked = biasInputElement.checked;
}
input.value = "";
});
strictBoundsInputElement.addEventListener("change", () => {
autocomplete.setOptions({
strictBounds: strictBoundsInputElement.checked,
});
if (strictBoundsInputElement.checked) {
biasInputElement.checked = strictBoundsInputElement.checked;
autocomplete.bindTo("bounds", map);
}
input.value = "";
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#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;
}
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div class="pac-card" id="pac-card">
<div>
<div id="title">Autocomplete search</div>
<div id="type-selector" class="pac-controls">
<input type="radio" name="type" id="changetype-all" checked="checked" />
<label for="changetype-all">All</label>
<input type="radio" name="type" id="changetype-establishment" />
<label for="changetype-establishment">Establishments</label>
<input type="radio" name="type" id="changetype-address" />
<label for="changetype-address">Addresses</label>
<input type="radio" name="type" id="changetype-geocode" />
<label for="changetype-geocode">Geocodes</label>
</div>
<br />
<div id="strict-bounds-selector" class="pac-controls">
<input type="checkbox" id="use-location-bias" value="" checked />
<label for="use-location-bias">Bias to map viewport</label>
<input type="checkbox" id="use-strict-bounds" value="" />
<label for="use-strict-bounds">Strict bounds</label>
</div>
</div>
<div id="pac-container">
<input id="pac-input" type="text" placeholder="Enter a location" value="airport" />
</div>
</div>
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span><br />
<span id="place-address"></span>
</div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places&v=weekly&channel=2" async></script>
</body>
</html>