如何通过google javascript api获取位置坐标知道place_id [英] How to get location coordinates knowing place_id via google javascript api

问题描述

我可以做 GET https://maps.googleapis.com/ maps / api / geocode / json？place_id = ChIJOwE7_GTtwokRFq0uOwLSE9g& key = KEY_GOES_HERE

给我这样的东西：

 ```results：[
 {
address_components：[...]，
格式化地址：美国纽约州纽约县，
几何体：{
bounds：{...}，
location：{
 lat：40.7830603，
lng：-73.9712488 
}，
location_type：APPROXIMATE，
viewport：{...} 
 }，
partial_match：true，
place_id：ChIJOwE7_GTtwokRFq0uOwLSE9g，
types：[...] 
} 
]，
status：OK
```
  

但我需要做它通过javascript api。

我的页面上没有任何地图，只需要获取坐标即可。

解决方案

从 Google Maps JavaScript API v3文档中的示例（与您的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。位置}）; 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％;宽度：100％; margin：0px; < script src =https：//   

I know place_id, and I need to know it's coordinates.

I can do GET https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJOwE7_GTtwokRFq0uOwLSE9g&key=KEY_GOES_HERE

which gives me something like that:

```   "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"
```

but I need to do it via javascript api.

I don't have any maps on my page, just need to get the coordinates.

解决方案

From the example in the Google Maps Javascript API v3 documentation (with your 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);
  }
});

working fiddle

code snippet:

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"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

这篇关于如何通过google javascript api获取位置坐标知道place_id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！