Question

我在查询https://maps.googleapis.com/maps/api/directions/json？从PHP获得2点之间的步行路线数据。是否可以将获得的数据原样传递给某些能够在JavaScript地图中呈现方向的函数或方法？

由于

Answer 1

在JavaScript地图中呈现路线的最简单方法是使用Google Maps JavaScript API v3 DirectionsService来请求数据。该答案可以通过Google Maps Javascript API v3 DirectionsRenderer直接在地图上呈现。

示例：

var map;

function initialize() {
  var myOptions = {
      zoom: 13,
      center: new google.maps.LatLng(40.7127837, -74.0059413),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    // Create a map and center it on Manhattan.
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  // Instantiate a directions service.
  var directionsService = new google.maps.DirectionsService();
  // Create a renderer for directions and bind it to the map.
  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map
  });
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  // Listen to change events from the start and end lists.
  var onChangeHandler = function() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    calcRoute(start, end, directionsService, directionsDisplay);
  };
  document.getElementById('start').addEventListener('change', onChangeHandler);
  document.getElementById('end').addEventListener('change', onChangeHandler);

  calcRoute(start, end, directionsService, directionsDisplay);
}

function calcRoute(start, end, directionsService, directionsDisplay) {
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode.WALKING
  };

  // Route the directions and pass the response to a
  // function to create markers for each step.
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else alert("Directions request failed:" + status);
  });
}

google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#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;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="floating-panel">
  <b>Start: </b>
  <select id="start">
    <option value="penn station, new york, ny">Penn Station</option>
    <option value="grand central station, new york, ny">Grand Central Station</option>
    <option value="625 8th Avenue, New York, NY, 10018">Port Authority Bus Terminal</option>
    <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
    <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
  </select>
  <b>End: </b>
  <select id="end">
    <option value="260 Broadway New York NY 10007">City Hall</option>
    <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option>
    <option value="moma, New York, NY">MOMA</option>
    <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>
    <option value="253 West 125th Street, New York, NY">Apollo Theater</option>
    <option value="1 Wall St, New York, NY">Wall St</option>
  </select>
</div>
<div id="map_canvas" style="width:100%;height:100%;"></div>

从PHP渲染JavaScript中的Google地图说明

1 个答案: