如何从用户输入获取两个位置之间的距离

本文介绍了如何从用户输入获取两个位置之间的距离的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正忙于开发Web应用程序.以下是Google API的代码，其中显示了用户手动输入的两点之间的方向. Google有一个Distance Matrixs API，它是根据静态位置计算得出的.我的网络应用使用了来自用户的位置，因此来自静态位置的代码无济于事.

I'm busy developing a web app. Below is code from Googles API that displays the directions between the two points which a user manually inputs. Google has a Distance Matrixs API which is calculated on static locations. My web app uses locations from users thus code from a static location won't help.

我想知道代码中缺少什么，以便在下图所示的google地图上显示我的结果.

I want to know how what is missing from my code to display my outcome on google maps like the image below.

这就是我希望结果在应用程序上看起来像什么的样子-IMAGE

This is what i want the outcome to kinda look like on the app - IMAGE

function initMap() { var map = new google.maps.Map(document.getElementById('map'), { mapTypeControl: false, center: {lat: -25.7234, lng: 28.4222}, zoom: 14 }); new AutocompleteDirectionsHandler(map); } function AutocompleteDirectionsHandler(map) { this.map = map; this.originPlaceId = null; this.destinationPlaceId = null; this.travelMode = 'DRIVING'; var originInput = document.getElementById('origin-input'); var destinationInput = document.getElementById('destination-input'); var modeSelector = document.getElementById('mode-selector'); this.directionsService = new google.maps.DirectionsService; this.directionsDisplay = new google.maps.DirectionsRenderer; this.directionsDisplay.setMap(map); var originAutocomplete = new google.maps.places.Autocomplete( originInput, {placeIdOnly: true}); var destinationAutocomplete = new google.maps.places.Autocomplete( destinationInput, {placeIdOnly: true}); this.setupClickListener('changemode-walking', 'WALKING'); this.setupClickListener('changemode-transit', 'TRANSIT'); this.setupClickListener('changemode-driving', 'DRIVING'); this.setupPlaceChangedListener(originAutocomplete, 'ORIG'); this.setupPlaceChangedListener(destinationAutocomplete, 'DEST'); } // Sets a listener on a radio button to change the filter type on Places // Autocomplete. AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) { var radioButton = document.getElementById(id); var me = this; radioButton.addEventListener('click', function() { me.travelMode = mode; me.route(); }); }; AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) { var me = this; autocomplete.bindTo('bounds', this.map); autocomplete.addListener('place_changed', function() { var place = autocomplete.getPlace(); if (!place.place_id) { window.alert("Please select an option from the dropdown list."); return; } if (mode === 'ORIG') { me.originPlaceId = place.place_id; } else { me.destinationPlaceId = place.place_id; } me.route(); }); }; AutocompleteDirectionsHandler.prototype.route = function() { if (!this.originPlaceId || !this.destinationPlaceId) { return; } var me = this; this.directionsService.route({ origin: {'placeId': this.originPlaceId}, destination: {'placeId': this.destinationPlaceId}, travelMode: this.travelMode }, function(response, status) { if (status === 'OK') { me.directionsDisplay.setDirections(response); } else { window.alert('Directions request failed due to ' + status); } }); };

推荐答案

方向响应包括每条腿的距离和持续时间.

The directions response includes both the distance and duration for each leg.

me.directionsDisplay.setDirections(response); var center = response.routes[0].overview_path[Math.floor(response.routes[0].overview_path.length / 2)]; infowindow.setPosition(center); infowindow.setContent(response.routes[0].legs[0].duration.text + "<br>" + response.routes[0].legs[0].distance.text); infowindow.open(me.map);

概念提琴证明

代码段:

var infowindow; function initMap() { var map = new google.maps.Map(document.getElementById('map'), { mapTypeControl: false, center: { lat: -25.7234, lng: 28.4222 }, zoom: 14 }); infowindow = new google.maps.InfoWindow(); new AutocompleteDirectionsHandler(map); } function AutocompleteDirectionsHandler(map) { this.map = map; this.originPlaceId = null; this.destinationPlaceId = null; this.travelMode = 'DRIVING'; var originInput = document.getElementById('origin-input'); var destinationInput = document.getElementById('destination-input'); var modeSelector = document.getElementById('mode-selector'); this.directionsService = new google.maps.DirectionsService(); this.directionsDisplay = new google.maps.DirectionsRenderer(); this.directionsDisplay.setMap(map); var originAutocomplete = new google.maps.places.Autocomplete( originInput, { placeIdOnly: true }); var destinationAutocomplete = new google.maps.places.Autocomplete( destinationInput, { placeIdOnly: true }); this.setupClickListener('changemode-walking', 'WALKING'); this.setupClickListener('changemode-transit', 'TRANSIT'); this.setupClickListener('changemode-driving', 'DRIVING'); this.setupPlaceChangedListener(originAutocomplete, 'ORIG'); this.setupPlaceChangedListener(destinationAutocomplete, 'DEST'); } // Sets a listener on a radio button to change the filter type on Places // Autocomplete. AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) { var radioButton = document.getElementById(id); var me = this; radioButton.addEventListener('click', function() { me.travelMode = mode; me.route(); }); }; AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) { var me = this; autocomplete.bindTo('bounds', this.map); autocomplete.addListener('place_changed', function() { var place = autocomplete.getPlace(); if (!place.place_id) { window.alert("Please select an option from the dropdown list."); return; } if (mode === 'ORIG') { me.originPlaceId = place.place_id; } else { me.destinationPlaceId = place.place_id; } me.route(); }); }; AutocompleteDirectionsHandler.prototype.route = function() { if (!this.originPlaceId || !this.destinationPlaceId) { return; } var me = this; this.directionsService.route({ origin: { 'placeId': this.originPlaceId }, destination: { 'placeId': this.destinationPlaceId }, travelMode: this.travelMode }, function(response, status) { if (status === 'OK') { me.directionsDisplay.setDirections(response); var center = response.routes[0].overview_path[Math.floor(response.routes[0].overview_path.length / 2)]; infowindow.setPosition(center); infowindow.setContent(response.routes[0].legs[0].duration.text + "<br>" + response.routes[0].legs[0].distance.text); infowindow.open(me.map); } else { window.alert('Directions request failed due to ' + status); } }); }; google.maps.event.addDomListener(window, "load", initMap);

html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }

<script src="maps.googleapis/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <input id="origin-input" value="New York, NY" /> <input id="destination-input" value="Newark, NJ" /> <div id="mode-selector"> <input id="changemode-walking" type="radio" value="WALKING" /> <input id="changemode-transit" type="radio" value="TRANSIT" /> <input id="changemode-driving" type="radio" value="DRIVING" checked="checked" /> </div> <div id="total"></div> <div id="map"></div>