在Google地图API中将地点ID位置传递到目的地 [英] Pass Place ID location to destination in Google Maps API

查看：153
本文介绍了在Google地图API中将地点ID位置传递到目的地的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图弄清楚如何动态地将Google Places位置的几何位置传递给路线服务请求目的地。如果我使用 

  service.getDetails（{
 placeId：'ChIJy_YmBMEMIocRZF8r5wPFMYU'
}，函数（place ，状态）{
 if（status === google.maps.places.PlacesServiceStatus.OK）{
 var marker = new google.maps.Marker（{
 map：map，
位置：place.geometry.location，
图标：'img / pillicon.jpg'
}）; 
}

来获得位置，然后我可以如何将它传递给我的请求，像这样 

  var request = {
 origin：currentLoc，
 destination：place.geometry.location，//不知道这个
 travelMode：google.maps.DirectionsTravelMode.DRIVING 
 };

我试过返回place.geometry.location，然后调用它，并将其转换到一个字符串，但我仍然无法访问它。谢谢我是新来的JavaScript

最简单的方法：直接将 placeId 传递给 DirectionsRequest



概念证明小提琴



code snippet： 

  var geocoder; var map; var service; var directionsService = new google.maps.DirectionsService（）; var directionsDisplay = new google.maps.DirectionsRenderer（）; var curLoc = new google.maps.LatLng（35.0853336，-106.6055534）; 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}）; directionsDisplay.setMap（地图）; calculateAndDisplayRoute（curLoc，{placeId：'ChIJy_YmBMEMIocRZF8r5wPFMYU'}，directionsService，directionsDisplay）;}函数calculateAndDisplayRoute（start，end，directionsService，directionsDisplay）{directionsService.route（{origin：start，destination：end，travelMode：google.maps.TravelMode .DRIVING}，function（response，status）{if（status === google.maps.DirectionsStatus.OK）{directionsDisplay.setDirections（response）;} else {window.alert（'Directions requests failed to +'status'） ;}}）;} google.maps.event.addDomListener（window，load，initialize）;  

  html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//

很可能你的问题是PlacesService是异步的，你需要使用在其回调例程中返回的结果。



概念证明小提琴



代码段：

var geocoder; var map; var service; var directionsService = new google.maps.DirectionsService（）; var directionsDisplay = new google.maps.DirectionsRenderer（）; var curLoc = new google.maps.LatLng（35.0853336，-106.6055534）; function initialize（）{var map = new google .maps.Map（document.getEle mentById（map_canvas），{center：new google.maps.LatLng（37.4419，-122.1419），zoom：13，mapTypeId：google.maps.MapTypeId.ROADMAP}）; directionsDisplay.setMap（地图）; service = new google.maps.places.PlacesService（map）; service.getDetails（{placeId：'ChIJy_YmBMEMIocRZF8r5wPFMYU'}，function（place，status）{if（status === google.maps.places.PlacesServiceStatus.OK）{var marker = new google.maps.Marker（{map：map ，position：place.geometry.location，icon：'http://maps.google.com/mapfiles/ms/micons/blue.png'}）; map.setCenter（marker.getPosition（））; calculateAndDisplayRoute（curLoc， marker.getPosition（），directionsService，directionsDisplay）;}}）;}函数calculateAndDisplayRoute（start，end，directionsService，directionsDisplay）{directionsService.route（{origin：start，destination：end，travelMode：google.maps.TravelMode.DRIVING }，function（response，status）{if（status === google.maps.DirectionsStatus.OK）{directionsDisplay.setDirections（response）;} else {window.alert（'Directions requests failed'+'status）;} }）;} google.maps.event.addDomListener（window，load，initialize）; 

  html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//


I'm trying to figure out how to pass the geometry location of a Google Places location to the directions service request destination dynamically. If I use 

 service.getDetails({
        placeId: 'ChIJy_YmBMEMIocRZF8r5wPFMYU'
      }, function(place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location,
            icon: 'img/pillicon.jpg'
          });              
        }

to get the position how can I then pass that to my request like so

var request = {
        origin: currentLoc,
        destination: place.geometry.location, //not sure about this           
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

I've tried returning the place.geometry.location and then calling it, and converting it to a string, but I still can't access it. Thanks I'm new to javascript

解决方案

Simplest way: pass the placeId directly into the DirectionsRequest

proof of concept fiddle

code snippet:

var geocoder;
var map;
var service;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

var curLoc = new google.maps.LatLng(35.0853336, -106.6055534);

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
    });
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(curLoc, {
    placeId: 'ChIJy_YmBMEMIocRZF8r5wPFMYU'
  }, directionsService, directionsDisplay);
}

function calculateAndDisplayRoute(start, end, directionsService, directionsDisplay) {
  directionsService.route({
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
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"></script>
<div id="map_canvas"></div>

Most likely your issue is that the PlacesService is asynchronous, you need to use the result returned inside its callback routine.

proof of concept fiddle

code snippet:

var geocoder;
var map;
var service;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

var curLoc = new google.maps.LatLng(35.0853336, -106.6055534);

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
    });
  directionsDisplay.setMap(map);
  service = new google.maps.places.PlacesService(map);
  service.getDetails({
    placeId: 'ChIJy_YmBMEMIocRZF8r5wPFMYU'
  }, function(place, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
      });
      map.setCenter(marker.getPosition());
      calculateAndDisplayRoute(curLoc, marker.getPosition(), directionsService, directionsDisplay);

    }
  });


}

function calculateAndDisplayRoute(start, end, directionsService, directionsDisplay) {
  directionsService.route({
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
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"></div>

这篇关于在Google地图API中将地点ID位置传递到目的地的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆