代码之家  ›  专栏  ›  技术社区  ›  Avery235

谷歌地图用地点id指定原点

  •  -1
  • Avery235  · 技术社区  · 7 年前

    我可以用纬度和经度指定原点

      DirectionsService.route({
        origin: new google.maps.LatLng(-34.397, 150.644)
      ...
    

    有没有一种方法可以使用位置id?

    origin: new google.maps.places.PlacesService('ChIJN1t_tDeuEmsRUsoyG83frY4'
    

    origin: 'place_id:ChIJN1t_tDeuEmsRUsoyG83frY4'
    

    不要工作。

    1 回复  |  直到 7 年前
        1
  •  2
  •   geocodezip    7 年前

    正确的语法 per the documentation 是:

    origin: {placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4"}
    

    proof of concept fiddle

    代码段:

    function initMap() {
      var directionsService = new google.maps.DirectionsService;
      var directionsDisplay = new google.maps.DirectionsRenderer;
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: {
          lat: 41.85,
          lng: -87.65
        }
      });
      directionsDisplay.setMap(map);
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    }
    
    function calculateAndDisplayRoute(directionsService, directionsDisplay) {
      directionsService.route({
        origin: {
          placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4"
        },
        destination: document.getElementById('end').value,
        travelMode: 'DRIVING'
      }, function(response, status) {
        if (status === 'OK') {
          directionsDisplay.setDirections(response);
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
    }
    /* 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;
    }
    
    #floating-panel {
      position: absolute;
      top: 10px;
      left: 25%;
      z-index: 5;
      background-color: #fff;
      padding: 5px;
      border: 1px solid #999;
      text-align: center;
      font-family: 'Roboto', 'sans-serif';
      line-height: 30px;
      padding-left: 10px;
    }
    <div id="floating-panel">
      <b>Start: </b>
      <input id="end" value="Sydney, AU" />
    </div>
    <div id="map"></div>
    <!-- Replace the value of the key parameter with your own API key. -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>