googlemapsapi以xml/json输出显示高速公路出口/英里市场？

Question

我为工作开发了一个脚本，用于测量车辆在一条路线上行驶的距离，行驶的最长距离是多少，以及路线是从a点到B点，是一个环路，还是车辆只是处于空闲状态。在

我使用googlemapsapi来确定所有这些，并搜索XML数据来确定车辆的当前位置。有一个“邻近”标签，它告诉你当前的城市在这个长/纬度坐标上是什么。在

我没有看到任何描述当前高速公路出口或里程标记的东西，有人知道如何通过谷歌获得这些信息吗？在

如果之前有人问过我，我很抱歉。我发现了一个类似的帖子，但那是7年前的事，并且声明GoogleMaps目前不提供这种服务。在

Answer 1

我觉得效果不错。
它有时会产生双标记（就像两个相隔几码的合并标记）。在

有一些额外的代码可能没有使用，有些东西被注释掉了。 我从另一个项目中复制/粘贴了大部分内容。在

<style>
body {
  width: 100%;
}
#right-panel, #map {
  height: 400px;
  width: 50%;
  float: left;
  overflow: auto;
}
hr {
  clear: both;
}
</style>

<input id="from" placeholder="from" value="Tulsa"/>
<input id="to" placeholder="to" value="Chicago"/>
<select onchange="routeType(this)">
  <option value="DRIVING">DRIVING</option>
  <option value="WALKING">WALKING</option>
  <option value="BICYCLING">BICYCLING</option>
  <option value="TRANSIT">TRANSIT</option>
</select>
<input value="plot" onclick="calculateRoute()" type="button"/>
<hr/>
<div id="map"></div>
<div id="right-panel"></div>
<hr/>
<input onclick="calculateRoute()" value="GO" type="button"/>
<div id="maplog"></div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=geometry"></script>
<script>
var map;
var here = {};
var dest = {};
var directionsService;
var directionsDisplay;
var travelMode = 'DRIVING'; //'WALKING';
var sourcePosition;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 35, lng: -100},
        zoom: 5,
        mapTypeId: 'terrain'
    });
    var marker = new google.maps.Marker({
      position: {lat: 50.8735506, lng: 4.3238525},
      map: map,
      title: 'Fermenthings winkel'
    });
    dest.marker = marker;
    directionsService = new google.maps.DirectionsService;
    directionsDisplay = new google.maps.DirectionsRenderer({
        draggable: true,
        suppressMarkers: true,
        panel: document.getElementById('right-panel'),
        map: map
    });
}
function trackLocation() {
    getLocation();

}
google.maps.event.addDomListener(window, 'load', initMap);


function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
    //x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
// x.innerHTML = "Latitude: " + position.coords.latitude +
// "<br>Longitude: " + position.coords.longitude;
    if(map) {

        sourcePosition = {lat: position.coords.latitude, lng: position.coords.longitude};
        //map.setCenter(sourcePosition);
        if(here.marker) {
            here.marker.setMap(null);
        }
        here.marker = new google.maps.Marker({
            position: sourcePosition,
            draggable: true,
            icon: {url: 'thumbnails/here.png'},
            map: map
        });
        var bounds = new google.maps.LatLngBounds();
        bounds.extend(sourcePosition);
        bounds.extend(dest.marker.getPosition());
        map.fitBounds(bounds);
        google.maps.event.addListener(here.marker, 'position_changed', function() {
            sourcePosition =  {lat: this.getPosition().lat(), lng: this.getPosition().lng()};
        });
        google.maps.event.addListener(here.marker, 'dragend', function() {
            sourcePosition =  {lat: this.getPosition().lat(), lng: this.getPosition().lng()};
            calculateRoute();
        });

        //return;
     }
     // route
    calculateRoute();
}

function createMarker(lat, lng, title) {
  return new google.maps.Marker({
      position: {lat: lat, lng: lng},
      map: map,
      title: title
    });
}
function displayRoute(origin, destination, service, display, waypoints, callback) {
    if(waypoints) {
        var options = {
            origin: origin,
            destination: destination,
            waypoints: waypoints,
            travelMode: travelMode //'DRIVING',
        };
    }
    else {
        var options = {
            origin: origin,
            destination: destination,
            travelMode: travelMode //'DRIVING',
        };
    }
    service.route(options, function(response, status) {
        if (status === 'OK') {
            //
            //createMarkers(response, callback);
            display.setDirections(response);
            if(callback) {
              callback(response);
            }
        } else {
            // alert('Could not display directions due to: ' + status);
        }
    });
}

function routeType(elm) {
    travelMode = elm.value;
    if(sourcePosition) {
        calculateRoute();
    }
}

function calculateRoute() {
    var from = document.getElementById('from').value;
    var to = document.getElementById('to').value;

    displayRoute(
        from, 
        to, 
        directionsService,
        directionsDisplay,
        null, //waypoints,
        function(response) {
          // loop steps
          var steps = response.routes[0].legs[0].steps;
          for(var i = 0; i<steps.length; i++) {
            var step = response.routes[0].legs[0].steps[i];
            // search for keywords in the instructions
            if( (step.instructions.indexOf('Take') > -1 || step.instructions.indexOf('take') > -1)  &&  step.instructions.indexOf('exit') > -1) {
              //here we enter a highway
              document.getElementById('maplog').innerHTML += 'exit: ' + step.start_location.lat() +','+ step.start_location.lng() +'<br/>';
              createMarker(step.start_location.lat(), step.start_location.lng(), 'exit');
            }
            if( (step.instructions.indexOf('Merge') > -1 || step.instructions.indexOf('merge') > -1)  &&  step.instructions.indexOf('onto') > -1) {
              //here we exit a highway
              document.getElementById('maplog').innerHTML += 'merge: ' + step.start_location.lat() +','+ step.start_location.lng() +'<br/>';
              createMarker(step.start_location.lat(), step.start_location.lng(), 'merge');
            }
          }
          //document.getElementById('maplog').innerHTML = JSON.stringify(response);
        }
    );
}
</script>