Question

我想创建一个链接，打开一个新的Google地图标签，其中包含从navigator.geolocation.getCurrentPosition到特定placeId的路线。

如果地理位置存在问题，请打开一个新选项卡，但不完成原点这是我尝试的：

const options = {
  placeId: 'ChIJDyx4bNhu5kcRqJ3RkAPGMEk',
  latitude: 48.925606,
  longitude: 2.327621,
};

const mapOptions = {
  zoom: 15,
  center: new google.maps.LatLng(options.latitude, options.longitude),
};

const map = new google.maps.Map(document.getElementById('Map'), mapOptions);
const service = new google.maps.places.PlacesService(map);

service.getDetails({
    placeId: options.placeId,
  }, (result, status) => {
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    alert(status);
    return;
  }
  const marker = new google.maps.Marker({
    map: map,
    position: result.geometry.location,
  });
});

$('.js-ItinaryFromI').on('click', () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
      const pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      };
    }, () => {
      // The problem seems to come from this line : 
      window.open(`https://www.google.com/maps/dir/origin=pos&destination=place_id:${options.placeId}&travelmode=driving`, '_blank');
    });
  } else {
    // And this line
   window.open(`https://www.google.com/maps/dir//place_id${options.placeId}&travelmode=driving`, '_blank');
  }
});

请问好吗？

Answer 1

如果您想计算位置之间的路线，则应使用 Google Maps Directions API 。您可以搜索多种交通方式的路线，包括公交，驾车，步行或骑车。

这些参数（来源，目的地，travel_mode）在Google Maps Directions API中使用，可能无法使用Google地图。

我还注意到，在您提供的代码中，某些变量未正确连接到请求中。因此，您的请求无法提供准确的结果。

以下是有效请求的示例：

window.open('https://maps.googleapis.com/maps/api/directions/json?origin='+pos.lat+','+pos.lng+'&destination=place_id:'+options.placeId+'&travelmode=driving&key=YOUR_API_KEY', '_blank');

不要忘记在每个请求中加入 API key 。

我修改了你的代码。您可以在下面查看：

const options = {
      placeId: 'ChIJDyx4bNhu5kcRqJ3RkAPGMEk',
      //placeId: 'ChIJ51Ic7BXIlzMRK2WH8qoM6Ek',
      latitude: 48.925606,
      longitude: 2.327621,
};

function initMap() {
    const mapOptions = {
      zoom: 15,
      center: new google.maps.LatLng(options.latitude, options.longitude),
    };

    const map = new google.maps.Map(document.getElementById('Map'), mapOptions);
    const service = new google.maps.places.PlacesService(map);

    service.getDetails({
        placeId: options.placeId,
      }, (result, status) => {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        alert(status);
        return;
      }
      const marker = new google.maps.Marker({
        map: map,
        position: result.geometry.location,
      });
    });
  
    if ( navigator.geolocation ) {
        navigator.geolocation.getCurrentPosition((position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };
          document.getElementById('js-ItinaryFromI').addEventListener('click', () => {
            window.open('https://maps.googleapis.com/maps/api/directions/json?origin='+pos.lat+','+pos.lng+'&destination=place_id:'+options.placeId+'&travelmode=driving&key=[API-KEY]', '_blank');
          });          
        });      
    } else {
      alert('Geolocation not found!');
    }
      
}

    html,body,#Map {
      width:100%;
      height:100%;
    }

  <button id="js-ItinaryFromI">Click Me</button>
  <div id="Map" ></div>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=initMap&libraries=places">
    </script>

您可以使用 JSBin 尝试此操作。由于某种原因，它在Stackoverflow的代码片段中不起作用。我不知道为什么。

祝你好运，编码愉快！

Google map api打开标签，其中包含从地理位置到placeId的路线

1 个答案: