Google Maps DistanceMatrix [英] Google Maps DistanceMatrix
问题描述
我使用的是Google API,我需要做的是获得两英里的不同距离。目前,我有以下几点: - $ / $>
var start = arrObjLatLngs [0];
var end = arrObjLatLngs [arrObjLatLngs.length - 1];
var base = new google.maps.LatLng(52.781048888889,-1.2110222222222546);
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins:[base,base],
destinations:[start,end],
travelMode:google.maps.TravelMode.DRIVING ,
avoidHighways:false,
avoidTolls:false
},callback);
function function callback(response,status){
if(status == google.maps.DistanceMatrixStatus.OK){
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
for(var i = 0; i< origins.length; i ++){
var results = response.rows [i] .elements;
for(var j = 0; j< results.length; j ++){
var element = results [j];
var distance = element.distance.text;
var duration = element.duration.text;
var from = origins [i];
var to = destinations [j];
}
}
}
}
什么我需要有两个变量; $ runinPickup
和 $ runinDestination
包含1.)base和start(它将是$ runinPickup)和2)base和end(这将是$ runinDestination)
如果我提醒 distance
,我得到响应: -
<13.9 km $ b 5.2 km
13.9公里
<5.2 km
首先,我只想知道我如何能够只是
base
和 start
之间的距离为$ runinPickup。其次,有没有办法可以做到这一点,所以它不包括小数?因此,不是第一个值为13.9公里,它只是13。然后,我需要将它转换为英里数,我猜我一旦得到我会做如下的值: var pickup _distance = parseInt(($ fieldPickup / 8)* 5); ?
任何帮助将不胜感激! :)
您是否阅读过文档?在源数组中传递两次相同的地址: 起源:[base,base],
destinations:[start ,结束],
会给你两次相同的结果。这应该工作(未测试),并给你2个结果:
起源:[base],
目的地: [开始,结束],
为了获得里程,我建议将unitSystem设置为 IMPERIAL (尽管我找不到文件中含义的定义):
unitSystem(可选) - 显示距离时使用的单位制。接受的值包括:
google.maps.UnitSystem.METRIC(默认)
google.maps.UnitSystem.IMPERIAL
您当然可以将METRIC单位转换为英里数。
显示两个值的示例,距离为帝国单位。
$ b 代码段:
var map; var geocoder; var bounds = new google.maps.LatLngBounds(); var markersArray = []; var base = new google.maps.LatLng(55.930385,-3.118425); var start ='Greenwich,英格兰'; var destinationA ='瑞典斯德哥尔摩'; var end = new google.maps.LatLng(50.087692,14.421150); var destinationIcon ='https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D | FF0000 | 000000'; var originIcon ='https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';function initialize(){var opts = {center:new google.maps .LatLng(55.53,9.4),zoom:10,mapTypeId:google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map(document.getElementById('map'),opts); geocoder = new google.maps.Geocoder(); calculateDistances();} google.maps.event.addDomListener(window,'load',initialize); function calculateDistances(){var service = new google.maps.DistanceMatrixService(); service.getDistanceMatrix({origins:[base],destinations:[start,end],travelMode:google.maps.TravelMode.DRIVING,unitSystem:google.maps.UnitSystem.IMPERIAL,avoidHighways:false,avoidTolls:false},callback) ;} function callback(response,status){if(status!= google.maps.DistanceMatrixStatus.OK){alert('Error was:'+ status);} }其他{var origins = response.originAddresses; var destinations = response.destinationAddresses; var outputDiv = document.getElementById('outputDiv'); outputDiv.innerHTML ='< table border =1>'; deleteOverlays(); var stringArray = ['$ runinPickup','$ runinDestination']; var htmlString ='< table border =1>'; for(var i = 0; i< origins.length; i ++){var results = response.rows [i] .elements; addMarker(origin [i],false); for(var j = 0; j
body {margin:20px; font-family:courier,sans-serif; font-size:12px;}#map {height:480px; width:640px;边框:实心薄#333; margin-top:20px;}
< script src = https://maps.googleapis.com/maps/api/js\"></script><div id =outputDiv>< / div>< div id =map><<< ; / div>
I am using Google API, what I need to do is get two different distances in miles. At the moment I have the following:-
var start = arrObjLatLngs[0];
var end = arrObjLatLngs[arrObjLatLngs.length - 1];
var base = new google.maps.LatLng(52.781048888889, -1.2110222222222546);
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [base, base],
destinations: [start, end],
travelMode: google.maps.TravelMode.DRIVING,
avoidHighways: false,
avoidTolls: false
}, callback);
function callback(response, status) {
if (status == google.maps.DistanceMatrixStatus.OK) {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++) {
var element = results[j];
var distance = element.distance.text;
var duration = element.duration.text;
var from = origins[i];
var to = destinations[j];
}
}
}
}
What I need to have is two variables; $runinPickup
and $runinDestination
that contains the distance between 1.) base and start (which will be $runinPickup) and 2.) base and end (which will be $runinDestination)
If I alert distance
I get the response:-
13.9 km
5.2 km
13.9 km
5.2 km
Firstly, I'm just wanting to know how I can get the distance of just the distance between base
and start
as $runinPickup. Secondly, is there a way I can do this so it doesn't include the decimal? So instead of 13.9 km for the first value, it would just be 13.
Then I would need to convert it into miles, which I'm guessing once I can get the value I would do it as follows:
var pickup_distance = parseInt(($fieldPickup / 8) * 5); ?
Any help would be much appreciated! :)
Did you read the documentation? Passing the same address twice in the origins array:
origins: [base, base],
destinations: [start, end],
Is going to give you the same result twice. This should work (not tested), and give you 2 results:
origins: [base],
destinations: [start, end],
To get miles I would suggest setting the unitSystem to IMPERIAL (although I can't find a definition of what that means in the documentation):
unitSystem (optional) — The unit system to use when displaying distance. Accepted values are:
google.maps.UnitSystem.METRIC (default)
google.maps.UnitSystem.IMPERIAL
You can of course convert METRIC units to miles.
Example showing the two values, with distances in IMPERIAL units. Modified from the example in the documentation.
code snippet:
var map;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];
var base = new google.maps.LatLng(55.930385, -3.118425);
var start = 'Greenwich, England';
var destinationA = 'Stockholm, Sweden';
var end = new google.maps.LatLng(50.087692, 14.421150);
var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
function initialize() {
var opts = {
center: new google.maps.LatLng(55.53, 9.4),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), opts);
geocoder = new google.maps.Geocoder();
calculateDistances();
}
google.maps.event.addDomListener(window, 'load', initialize);
function calculateDistances() {
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [base],
destinations: [start, end],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL,
avoidHighways: false,
avoidTolls: false
}, callback);
}
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('outputDiv');
outputDiv.innerHTML = '<table border="1">';
deleteOverlays();
var stringArray = ['$runinPickup', '$runinDestination'];
var htmlString = '<table border="1">';
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
addMarker(origins[i], false);
for (var j = 0; j < results.length; j++) {
addMarker(destinations[j], true);
htmlString += '<tr><td>' + stringArray[j] + '</td><td>' + results[j].distance.text + '</td></tr>';
outputDiv.innerHTML += '<tr><td>' + stringArray[j] + '</td><td>' + results[j].distance.text + '</td></tr>';
}
}
htmlString += '</table>';
// outputDiv.innerHTML += '</table>';
outputDiv.innerHTML = htmlString;
// alert(htmlString);
}
}
function addMarker(location, isDestination) {
var icon;
if (isDestination) {
icon = destinationIcon;
} else {
icon = originIcon;
}
geocoder.geocode({
'address': location
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: icon
});
markersArray.push(marker);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
body {
margin: 20px;
font-family: courier, sans-serif;
font-size: 12px;
}
#map {
height: 480px;
width: 640px;
border: solid thin #333;
margin-top: 20px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="outputDiv"></div>
<div id="map"></div>
这篇关于Google Maps DistanceMatrix的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!