我正在寻找一个纯(或尽可能纯)Google Maps JavaScript API V3 解决方案，以将行驶时间多边形功能添加到我的 Google map 应用中。
基本上，工作流程是用户点击 map 上的标记或点，并在标记/点周围生成一个多边形，指示您可以在 5 分钟内向任何方向行驶的区域。
我不确定是否有可能将此作为一个纯 Google Maps API 解决方案来执行，因为它需要太多调用具有随机路线的路线服务，然后是任何不'落在时间阈值内被扔掉。不确定这是否可行或设计它的最佳方法是什么。为此可能需要使用一些后端处理，但我想首先排除所有其他选项，但欢迎提供任何后端解决方案示例。
非常感谢任何帮助、建议或示例。以下是我遇到的一些示例，但它们不是纯粹的 Google Maps API 解决方案和/或未使用行驶时间:
Google Maps Utility Library example - 在您单击的点周围绘制 1、2 和 3 分钟车程的多边形，但它使用 Esri 的示例地理处理服务来运行计算并生成多边形几何图形，因此这无法满足我的要求。
30 mile directions - 它是一个使用 Directions API 的纯 Google Maps API 解决方案并绘制了一个漂亮的多边形，但它不会将行驶时间纳入计算，只是与该点的距离到 30 英里外。
Mapnificent - 似乎是一个纯粹的谷歌地图 API 解决方案，他们有一个 API，但他们正在处理从公共(public)交通数据中提取的公共(public)交通时间，不是驾驶时间。因此，随着时间的增加而“开放”的区域表示您可以在指定时间内从何处乘坐公共(public)交通工具。我想要这个，但有驾驶时间而不是运输时间。
最佳答案
你所说的“30 mile directions”是我的混搭，尽管它很旧并且是用 V2 API 编写的。您可以使用与该 mashup 使用的相同原理，即围绕起点计算一个圆并将其点用作目的地，然后对于每条路线，当它达到所需的行驶时间时将其切断。
原始链接已失效(下面的代码片段)
在该示例中，函数 shortenAndShow() 切断了超过 30 英里的路线部分。由于 30 英里的目标圆圈是直线半径，因此不太可能到达，因为道路有曲线，所以您在到达蓝色圆圈的边缘之前到达了 30 英里。您也可以这样做，但要根据行驶时间而不是距离来切断路线。
性能将取决于沿圆的间隔(以度为单位)，您可以在该间隔处设置可能的目的地点。每 1 度尝试一次比每 10 度尝试一次(默认为 30 度)需要多 10 倍的请求。
代码片段:
var map;
var container;
var zoom = 9;
var centerPoint = new google.maps.LatLng(35.149534, -90.04898);
var dirService = new google.maps.DirectionsService();
var centerMarker;
var circleMarkers = Array();
var circlePoints = Array();
var drivePolyPoints = Array();
var searchPolygon, drivePolygon;
var distToDrive = 30; // miles
var pointInterval = 30;
var searchPoints = [];
var polyline;
var polylines = [];
var redIcon8 = "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png";
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: centerPoint,
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, "click", mapClick);
}
google.maps.event.addDomListener(window, "load", initialize);
function mapClick(evt) {
// map.clearOverlays();
circleMarkers = Array();
if (!centerMarker) {
centerMarker = new google.maps.Marker({
position: evt.latLng,
map: map
});
} else {
centerMarker.setMap(null);
centerMarker.setPosition(evt.latLng);
}
centerMarker.setMap(map);
searchPoints = getCirclePoints(evt.latLng, distToDrive);
drivePolyPoints = Array();
getDirections();
}
function getCirclePoints(center, radius) {
var bounds = new google.maps.LatLngBounds();
var circlePoints = Array();
var searchPoints = Array();
with(Math) {
var rLat = (radius / 3963.189) * (180 / PI); // miles
var rLng = rLat / cos(center.lat() * (PI / 180));
for (var a = 0; a < 361; a++) {
var aRad = a * (PI / 180);
var x = center.lng() + (rLng * cos(aRad));
var y = center.lat() + (rLat * sin(aRad));
var point = new google.maps.LatLng(parseFloat(y), parseFloat(x), true);
bounds.extend(point);
circlePoints.push(point);
if (a % pointInterval == 0) {
searchPoints.push(point);
}
}
}
searchPolygon = new google.maps.Polygon({
paths: circlePoints,
strokeColor: '#0000ff',
strokeWeight: 1,
strokeOpacity: 1,
fillColor: '#0000ff',
fillOpacity: 0.2
});
searchPolygon.setMap(map);
map.fitBounds(bounds);
return searchPoints;
}
function getDirections() {
if (!searchPoints.length) {
return;
}
var to = searchPoints.shift();
var request = {
origin: centerMarker.getPosition(),
destination: to,
travelMode: google.maps.TravelMode.DRIVING
};
dirService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
var distance = parseInt(result.routes[0].legs[0].distance.value / 1609);
var duration = parseFloat(result.routes[0].legs[0].duration.value / 3600).toFixed(2);
var path = result.routes[0].overview_path;
var legs = result.routes[0].legs;
if (polyline && polyline.setPath) {
polyline.setPath([]);
} else {
polyline = new google.maps.Polyline({
path: [],
// map: map,
strokeColor: "#FF0000",
strokeOpacity: 1
});
}
for (i = 0; i < legs.length; i++) {
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);
shortenAndShow(polyline);
getDirections();
} else {
console.log("Directions request failed, status=" + status + " [from:" + request.origin + " to:" + request.destination + "]");
getDirections();
}
});
}
function shortenAndShow(polyline) {
var distToDriveM = distToDrive * 1609;
var dist = 0;
var cutoffIndex = 0;
var copyPoints = Array();
for (var n = 0; n < polyline.getPath().getLength() - 1; n++) {
dist += google.maps.geometry.spherical.computeDistanceBetween(polyline.getPath().getAt(n), polyline.getPath().getAt(n + 1));
//GLog.write(dist + ' - ' + distToDriveM);
if (dist < distToDriveM) {
copyPoints.push(polyline.getPath().getAt(n));
} else {
break;
}
}
var lastPoint = copyPoints[copyPoints.length - 1];
var newLine = new google.maps.Polyline({
path: copyPoints,
strokeColor: '#ff0000',
strokeWeight: 2,
strokeOpacity: 1
});
newLine.setMap(map);
polylines.push(newLine);
drivePolyPoints.push(lastPoint);
addBorderMarker(lastPoint, dist)
if (drivePolyPoints.length > 3) {
if (drivePolygon) {
drivePolygon.setMap(null);
}
drivePolygon = new google.maps.Polygon({
paths: drivePolyPoints,
strokeColor: '#00ff00',
strokeWeight: 1,
strokeOpacity: 1,
fillColor: '#00ff00',
fillOpacity: 0.4
});
drivePolygon.setMap(map);
}
}
function addBorderMarker(pt, d) {
var str = pt.lat().toFixed(6) + ',' + pt.lng().toFixed(6) + ' - Driving Distance: ' + (d / 1609).toFixed(2) + ' miles';
var marker = new google.maps.Marker({
position: pt,
icon: redIcon8,
title: str
});
circleMarkers.push(marker);
marker.setMap(map);
}
function clearOverlays() {
for (var i = 0; i < circleMarkers.length; i++) {
circleMarkers[i].setMap(null);
}
circleMarkers = [];
for (var i = 0; i < circlePoints.length; i++) {
circlePoints[i].setMap(null);
}
circlePoints = [];
for (var i = 0; i < polylines.length; i++) {
polylines[i].setMap(null);
}
polylines = [];
if (searchPolygon && searchPolygon.setMap) searchPolygon.setMap(null);
if (drivePolygon && drivePolygon.setMap) drivePolygon.setMap(null);
if (centerMarker && centerMarker.setMap) centerMarker.setMap(null);
}html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<a href="#" onclick="clearOverlays();">Clear</a> |
<a href="#" onclick="pointInterval=30;clearOverlays();">interval 30 (default)</a> |
<a href="#" onclick="pointInterval=20;clearOverlays();">interval 20</a> |
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>关于javascript - 使用 Google Maps API 驾驶时间多边形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12305366/