如何通过 google javascript api 获取知道 place_id 的位置坐标
How to get location coordinates knowing place_id via google javascript api
我知道place_id,我需要知道它的坐标。
我能做到GET https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJOwE7_GTtwokRFq0uOwLSE9g&key=KEY_GOES_HERE
这给了我类似的东西:
``` "results" : [
{
"address_components" : [...],
"formatted_address" : "New York County, NY, USA",
"geometry" : {
"bounds" : {...},
"location" : {
"lat" : 40.7830603,
"lng" : -73.9712488
},
"location_type" : "APPROXIMATE",
"viewport" : {...}
},
"partial_match" : true,
"place_id" : "ChIJOwE7_GTtwokRFq0uOwLSE9g",
"types" : [...]
}
],
"status" : "OK"
```
但我需要通过 javascript api.
我的页面上没有任何地图,只需要获取坐标。
您可以像这样检索它的位置
var obj = JSON.parse(yourJSONstring);
obj.results[0].geometry.location.lat;
obj.results[0].geometry.location.lng;
来自 the example in the Google Maps Javascript API v3 documentation(和你的 place_id):
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
map.fitBounds(place.geometry.viewport);
}
});
代码片段:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var request = {
placeId: 'ChIJOwE7_GTtwokRFq0uOwLSE9g'
};
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
map.fitBounds(place.geometry.viewport);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
发生这种情况是因为位置 属性 的类型为 google.maps.LatLng。
要获取纬度和经度,可以使用以下函数:
示例:
place.geometry.location.any_function_below()
1. toString(): Converts to string representation.eg ((37.8042802, -122.41364429999999))
2. lat(): Returns the latitude in degrees.
3. lng(): Returns the longitude in degrees.
4. toJSON(): Converts to JSON representation ({lat: "", lng: ""}).
5. toUrlValue(precision?:number): Returns a string of the form "lat,lng" for this LatLng. We round the lat/lng values to 6 decimal places by default.
您可以在此处阅读更多内容:https://developers.google.com/maps/documentation/javascript/3.exp/reference#LatLng。
你不需要地图。它是 Restful 网络服务,returns 一个 JSON 字符串。在你的应用中,你只需要发送一个 HTTP 请求到
然后解析返回的JSON字符串,获取里面的latlng。
如果您在网络应用中使用 Jquery,您可以
$.ajax({
type: "GET",
url: "https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJOwE7_GTtwokRFq0uOwLSE9g&key=KEY_GOES_HERE",
dataType: "text",
success: function (yourJSONstring){
var respJson = $.parseJSON(yourJSONstring);
// then something like ...
// respJson.results[0].geometry.location.lat;
// respJson.results[0].geometry.location.lng;
},
error: function (xhr) {
}
});
`//only add these line under function`
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
autocomplete.setFields(['place_id', 'geometry', 'name', 'formatted_address']);
var lng = place.geometry.location.lng();
var lat = place.geometry.location.lat();
var latlng = {lat , lng};
console.log(latlng);
});
我知道place_id,我需要知道它的坐标。
我能做到GET https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJOwE7_GTtwokRFq0uOwLSE9g&key=KEY_GOES_HERE
这给了我类似的东西:
``` "results" : [
{
"address_components" : [...],
"formatted_address" : "New York County, NY, USA",
"geometry" : {
"bounds" : {...},
"location" : {
"lat" : 40.7830603,
"lng" : -73.9712488
},
"location_type" : "APPROXIMATE",
"viewport" : {...}
},
"partial_match" : true,
"place_id" : "ChIJOwE7_GTtwokRFq0uOwLSE9g",
"types" : [...]
}
],
"status" : "OK"
```
但我需要通过 javascript api.
我的页面上没有任何地图,只需要获取坐标。
您可以像这样检索它的位置
var obj = JSON.parse(yourJSONstring);
obj.results[0].geometry.location.lat;
obj.results[0].geometry.location.lng;
来自 the example in the Google Maps Javascript API v3 documentation(和你的 place_id):
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
map.fitBounds(place.geometry.viewport);
}
});
代码片段:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var request = {
placeId: 'ChIJOwE7_GTtwokRFq0uOwLSE9g'
};
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
map.fitBounds(place.geometry.viewport);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
发生这种情况是因为位置 属性 的类型为 google.maps.LatLng。
要获取纬度和经度,可以使用以下函数: 示例:
place.geometry.location.any_function_below()
1. toString(): Converts to string representation.eg ((37.8042802, -122.41364429999999))
2. lat(): Returns the latitude in degrees.
3. lng(): Returns the longitude in degrees.
4. toJSON(): Converts to JSON representation ({lat: "", lng: ""}).
5. toUrlValue(precision?:number): Returns a string of the form "lat,lng" for this LatLng. We round the lat/lng values to 6 decimal places by default.
您可以在此处阅读更多内容:https://developers.google.com/maps/documentation/javascript/3.exp/reference#LatLng。
你不需要地图。它是 Restful 网络服务,returns 一个 JSON 字符串。在你的应用中,你只需要发送一个 HTTP 请求到
然后解析返回的JSON字符串,获取里面的latlng。
如果您在网络应用中使用 Jquery,您可以
$.ajax({
type: "GET",
url: "https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJOwE7_GTtwokRFq0uOwLSE9g&key=KEY_GOES_HERE",
dataType: "text",
success: function (yourJSONstring){
var respJson = $.parseJSON(yourJSONstring);
// then something like ...
// respJson.results[0].geometry.location.lat;
// respJson.results[0].geometry.location.lng;
},
error: function (xhr) {
}
});
`//only add these line under function`
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
autocomplete.setFields(['place_id', 'geometry', 'name', 'formatted_address']);
var lng = place.geometry.location.lng();
var lat = place.geometry.location.lat();
var latlng = {lat , lng};
console.log(latlng);
});