谷歌地图中路线的中点 [英] Midpoint of route in google maps
问题描述
我想知道是否有人知道如何使用谷歌地图 api 找到两个地方之间路线的中点.我不想要地理中心,而是想要沿行驶距离的中点.我是 Javascript 和 google maps api 的新手,因此如果您可以在答案中包含演示或一些代码,那将非常有帮助.最终结果将输出纬度和经度,并表示类似于本网站的内容:
var directionDisplay;var directionService = new google.maps.DirectionsService();无功地图;var polyline = null;var infowindow = new google.maps.InfoWindow();函数 createMarker(latlng, label, html) {var contentString = '<b>'+label+'</b><br>'+html;var 标记 = 新的 google.maps.Marker({位置:latlng,地图:地图,标题:标签,zIndex:Math.round(latlng.lat()*-100000)<<5});标记.我的名字 = 标签;google.maps.event.addListener(marker, 'click', function() {infowindow.setContent(contentString+"
"+marker.getPosition().toUrlValue(6));infowindow.open(地图,标记);});返回标记;}函数初始化(){方向显示 = 新的 google.maps.DirectionsRenderer({suppressMarkers:true});var 芝加哥 = 新 google.maps.LatLng(41.850033, -87.6500523);var myOptions = {变焦:6,mapTypeId: google.maps.MapTypeId.ROADMAP,中心:芝加哥}map = new google.maps.Map(document.getElementById(map_canvas"), myOptions);折线 = 新的 google.maps.Polyline({小路: [],中风颜色:'#FF0000',行程重量:3});DirectionsDisplay.setMap(地图);calcRoute();}函数 calcRoute() {var start = document.getElementById(start").value;var end = document.getElementById("end").value;var travelMode = google.maps.DirectionsTravelMode.DRIVING无功请求 = {起源:开始,目的地:结束,旅行模式:旅行模式};路线Service.route(请求,功能(响应,状态){如果(状态 == google.maps.DirectionsStatus.OK){polyline.setPath([]);var bounds = new google.maps.LatLngBounds();startLocation = new Object();endLocation = new Object();DirectionsDisplay.setDirections(响应);var route = response.routes[0];var summaryPanel = document.getElementById(directions_panel");summaryPanel.innerHTML = "";//对于每个路由,显示摘要信息.var path = response.routes[0].overview_path;var 腿 = response.routes[0].legs;for (i=0;i
代码片段:
var directionDisplay;var directionService = new google.maps.DirectionsService();无功地图;var polyline = null;var infowindow = new google.maps.InfoWindow();函数 createMarker(latlng, label, html) {var contentString = ''+ 标签 + '</b><br>'+ html;var 标记 = 新的 google.maps.Marker({位置:latlng,地图:地图,标题:标签,zIndex: Math.round(latlng.lat() * -100000) <<5});标记.我的名字 = 标签;google.maps.event.addListener(marker, 'click', function() {infowindow.setContent(contentString + "
" + marker.getPosition().toUrlValue(6));infowindow.open(地图,标记);});返回标记;}函数初始化(){方向显示 = 新的 google.maps.DirectionsRenderer({抑制标记:真});var 芝加哥 = 新 google.maps.LatLng(41.850033, -87.6500523);var myOptions = {变焦:6,mapTypeId: google.maps.MapTypeId.ROADMAP,中心:芝加哥}map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);折线 = 新的 google.maps.Polyline({小路: [],中风颜色:'#FF0000',行程重量:3});DirectionsDisplay.setMap(地图);calcRoute();}函数 calcRoute() {var start = document.getElementById("start").value;var end = document.getElementById("end").value;var travelMode = google.maps.DirectionsTravelMode.DRIVING无功请求 = {起源:开始,目的地:结束,旅行模式:旅行模式};路线Service.route(请求,功能(响应,状态){如果(状态 == google.maps.DirectionsStatus.OK){polyline.setPath([]);var bounds = new google.maps.LatLngBounds();startLocation = new Object();endLocation = new Object();DirectionsDisplay.setDirections(响应);var route = response.routes[0];var summaryPanel = document.getElementById("directions_panel");summaryPanel.innerHTML = "";//对于每个路由,显示摘要信息.var path = response.routes[0].overview_path;var 腿 = response.routes[0].legs;for (i = 0; i 总时间为:" + (totalTime/60).toFixed(2) + "minutes";}功能 putMarkerOnRoute(百分比){var 距离 = (百分比/100) * totalDist;var time = ((percentage/100) * totalTime/60).toFixed(2);如果(!标记){标记 = createMarker(polyline.GetPointAtDistance(distance), "time:" + time, "marker");} 别的 {标记.setPosition(polyline.GetPointAtDistance(distance));标记.setTitle("时间:" + 时间);}}google.maps.event.addDomListener(window, 'load', initialize);//来自 http://www.geocodezip.com/scripts/v3_epoly.js,修改为使用几何库//=== 一种返回沿路径给定距离的点的 GLatLng 的方法 ===//=== 如果路径短于指定距离则返回 null ===google.maps.Polyline.prototype.GetPointAtDistance = 函数(米){//一些尴尬的特殊情况if (metres == 0) 返回 this.getPath().getAt(0);如果(米<0)返回空值;如果 (this.getPath().getLength() <2) 返回空值;无功分布= 0;var olddist = 0;对于 (var i = 1;(i < this.getPath().getLength() && dist < 米);我++) {olddist = dist;dist += google.maps.geometry.sphereal.computeDistanceBetween(this.getPath().getAt(i), this.getPath().getAt(i - 1));}如果(距离<米){返回空;}var p1 = this.getPath().getAt(i - 2);var p2 = this.getPath().getAt(i - 1);var m = (米 - olddist)/(dist - olddist);返回新的 google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) *米);}
html {高度:100%}身体 {高度:100%;边距:0px;填充:0px}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?键=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script><div id="工具">开始:<input type="text" name="start" id="start" value="海得拉巴"/>结尾:<input type="text" name="end" id="end" value="Bangalore"/><input type="submit" onclick="calcRoute();"/><br/>
<div id="map_canvas" style="float:left;width:70%;height:80%;"></div><div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px"><div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div><div id="total"></div>
I was wondering if anyone knew how to use the google maps api to find the midpoint of a route between two places. I dont want the geographic center but rather the midpoint along the driving distance. I am new to both Javascript and the google maps api so if you could include a demo or some code with your answer it would be very helpful. The end result would output the latitude and longitude and would represent something like what this website has: http://www.geomidpoint.com/meet/.
So far I have only calculated the geographic midpoint between certain points using the algorithm here: Calculate the center point of multiple latitude/longitude coordinate pairs
I wanted to test efficiencies between geographic center and route midpoint for some research
Example that calculates the midpoint of a route
Uses the v3 version of Mike Williams' epoly library.
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var polyline = null;
var infowindow = new google.maps.InfoWindow();
function createMarker(latlng, label, html) {
var contentString = '<b>'+label+'</b><br>'+html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: label,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
marker.myname = label;
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString+"<br>"+marker.getPosition().toUrlValue(6));
infowindow.open(map,marker);
});
return marker;
}
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers:true});
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
polyline = new google.maps.Polyline({
path: [],
strokeColor: '#FF0000',
strokeWeight: 3
});
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var travelMode = google.maps.DirectionsTravelMode.DRIVING
var request = {
origin: start,
destination: end,
travelMode: travelMode
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
polyline.setPath([]);
var bounds = new google.maps.LatLngBounds();
startLocation = new Object();
endLocation = new Object();
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";
// For each route, display summary information.
var path = response.routes[0].overview_path;
var legs = response.routes[0].legs;
for (i=0;i<legs.length;i++) {
if (i == 0) {
startLocation.latlng = legs[i].start_location;
startLocation.address = legs[i].start_address;
marker = createMarker(legs[i].start_location,"midpoint","","green");
}
endLocation.latlng = legs[i].end_location;
endLocation.address = legs[i].end_address;
var steps = legs[i].steps;
for (j=0;j<steps.length;j++) {
var nextSegment = steps[j].path;
for (k=0;k<nextSegment.length;k++) {
polyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
polyline.setMap(map);
computeTotalDistance(response);
} else {
alert("directions response "+status);
}
});
}
var totalDist = 0;
var totalTime = 0;
function computeTotalDistance(result) {
totalDist = 0;
totalTime = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
totalDist += myroute.legs[i].distance.value;
totalTime += myroute.legs[i].duration.value;
}
putMarkerOnRoute(50);
totalDist = totalDist / 1000.
document.getElementById("total").innerHTML = "total distance is: "+ totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(2) + " minutes";
}
function putMarkerOnRoute(percentage) {
var distance = (percentage/100) * totalDist;
var time = ((percentage/100) * totalTime/60).toFixed(2);
if (!marker) {
marker = createMarker(polyline.GetPointAtDistance(distance),"time: "+time,"marker");
} else {
marker.setPosition(polyline.GetPointAtDistance(distance));
marker.setTitle("time:"+time);
}
}
code snippet:
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var polyline = null;
var infowindow = new google.maps.InfoWindow();
function createMarker(latlng, label, html) {
var contentString = '<b>' + label + '</b><br>' + html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: label,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
marker.myname = label;
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString + "<br>" + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
});
return marker;
}
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
polyline = new google.maps.Polyline({
path: [],
strokeColor: '#FF0000',
strokeWeight: 3
});
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var travelMode = google.maps.DirectionsTravelMode.DRIVING
var request = {
origin: start,
destination: end,
travelMode: travelMode
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
polyline.setPath([]);
var bounds = new google.maps.LatLngBounds();
startLocation = new Object();
endLocation = new Object();
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";
// For each route, display summary information.
var path = response.routes[0].overview_path;
var legs = response.routes[0].legs;
for (i = 0; i < legs.length; i++) {
if (i == 0) {
startLocation.latlng = legs[i].start_location;
startLocation.address = legs[i].start_address;
marker = createMarker(legs[i].start_location, "midpoint", "", "green");
}
endLocation.latlng = legs[i].end_location;
endLocation.address = legs[i].end_address;
var steps = legs[i].steps;
for (j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
for (k = 0; k < nextSegment.length; k++) {
polyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
polyline.setMap(map);
computeTotalDistance(response);
} else {
alert("directions response " + status);
}
});
}
var totalDist = 0;
var totalTime = 0;
function computeTotalDistance(result) {
totalDist = 0;
totalTime = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
totalDist += myroute.legs[i].distance.value;
totalTime += myroute.legs[i].duration.value;
}
putMarkerOnRoute(50);
totalDist = totalDist / 1000.
document.getElementById("total").innerHTML = "total distance is: " + totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(2) + " minutes";
}
function putMarkerOnRoute(percentage) {
var distance = (percentage / 100) * totalDist;
var time = ((percentage / 100) * totalTime / 60).toFixed(2);
if (!marker) {
marker = createMarker(polyline.GetPointAtDistance(distance), "time: " + time, "marker");
} else {
marker.setPosition(polyline.GetPointAtDistance(distance));
marker.setTitle("time:" + time);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
// from http://www.geocodezip.com/scripts/v3_epoly.js, modified to use the geometry library
// === A method which returns a GLatLng of a point a given distance along the path ===
// === Returns null if the path is shorter than the specified distance ===
google.maps.Polyline.prototype.GetPointAtDistance = function(metres) {
// some awkward special cases
if (metres == 0) return this.getPath().getAt(0);
if (metres < 0) return null;
if (this.getPath().getLength() < 2) return null;
var dist = 0;
var olddist = 0;
for (var i = 1;
(i < this.getPath().getLength() && dist < metres); i++) {
olddist = dist;
dist += google.maps.geometry.spherical.computeDistanceBetween(this.getPath().getAt(i), this.getPath().getAt(i - 1));
}
if (dist < metres) {
return null;
}
var p1 = this.getPath().getAt(i - 2);
var p2 = this.getPath().getAt(i - 1);
var m = (metres - olddist) / (dist - olddist);
return new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m);
}
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry"></script>
<div id="tools">
start:
<input type="text" name="start" id="start" value="Hyderabad" /> end:
<input type="text" name="end" id="end" value="Bangalore" />
<input type="submit" onclick="calcRoute();" /><br />
</div>
<div id="map_canvas" style="float:left;width:70%;height:80%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
<div id="total"></div>
</div>
这篇关于谷歌地图中路线的中点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!