我试图找到两条路线之间的重叠。为此，我遵循以下链接中接受的答案 -
How to find the overlap of polylines in order to draw the common segment as shaded on google maps
接受的答案表明，即使我删除路线上的航路点，jsfiddle也适用于我。现在我在我的机器上的普通html上尝试相同的代码。这是html代码 -
it现在我收到一条javascript错误，上面写着
<html>
<head>
<title>Hello World</title>
<style>
body, html, #map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script>
var map;
var directionsService;
var bounds = new google.maps.LatLngBounds();
var polyline1 = new google.maps.Polyline({
path: [],
strokeColor: "#DD71D8",
strokeWeight: 1
});
var polyline2 = new google.maps.Polyline({
path: [],
strokeColor: "#0000ff",
strokeWeight: 1
});
var polyline3 = new google.maps.Polyline({
path: [],
strokeColor: "#ff0000",
strokeWeight: 8
});
function loadRoute1() {
var request = {
origin: new google.maps.LatLng(30.244517, -97.892271),
destination: new google.maps.LatLng(30.244517, -97.892271),
waypoints: [{
location: new google.maps.LatLng(30.241532, -97.894202)
}, {
location: new google.maps.LatLng(30.240374, -97.891633)
}, {
location: new google.maps.LatLng(30.244220, -97.890442)
}],
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
result.draggable = true;
var renderer = new google.maps.DirectionsRenderer({
draggable: false, // true,
polylineOptions: {
strokeColor: "#DD71D8",
strokeWeight: 1
},
map: map
});
var path = result.routes[0].overview_path;
var legs = result.routes[0].legs;
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++) {
polyline1.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
// polyline1.setMap(map);
if (polyline2.getPath().getLength() > 1) {
getPolylineIntersection();
}
renderer.setDirections(result);
}
});
}
function loadRoute2() {
var request = {
origin: new google.maps.LatLng(30.244220, -97.890426),
destination: new google.maps.LatLng(30.244220, -97.890426),
waypoints: [{
location: new google.maps.LatLng(30.243312, -97.890877)
}, {
location: new google.maps.LatLng(30.242431, -97.891601)
}, {
location: new google.maps.LatLng(30.243145, -97.893156)
}, {
location: new google.maps.LatLng(30.242357, -97.893811)
}, {
location: new google.maps.LatLng(30.241671, -97.891783)
}],
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
result.draggable = true;
var renderer = new google.maps.DirectionsRenderer({
draggable: false, // true,
polylineOptions: {
strokeColor: "#0000ff",
strokeWeight: 1
},
map: map
});
var path = result.routes[0].overview_path;
var legs = result.routes[0].legs;
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++) {
polyline2.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
// polyline2.setMap(map);
if (polyline1.getPath().getLength() > 1) {
getPolylineIntersection();
}
renderer.setDirections(result);
}
});
}
function getPolylineIntersection() {
var commonPts = [];
for (var i = 0; i < polyline1.getPath().getLength(); i++) {
for (var j = 0; j < polyline2.getPath().getLength(); j++) {
if (polyline1.getPath().getAt(i).equals(polyline2.getPath().getAt(j))) {
commonPts.push({
lat: polyline1.getPath().getAt(i).lat(),
lng: polyline1.getPath().getAt(i).lng(),
route1idx: i
});
}
}
}
var path = [];
var prevIdx = commonPts[0].route1idx;
for (var i = 0; i < commonPts.length; i++) {
if (commonPts[i].route1idx <= prevIdx + 1) {
path.push(commonPts[i]);
prevIdx = commonPts[i].route1idx;
} else {
var polyline = new google.maps.Polyline({
map: map,
path: path,
strokeWeight: 8,
strokeColor: "#ff0000"
});
path = [];
prevIdx = commonPts[i].route1idx;
}
}
var polyline = new google.maps.Polyline({
map: map,
path: path,
strokeWeight: 8,
strokeColor: "#ff0000"
});
}
function initialize() {
alert("Hello");
var mapOptions = {
zoom: 16,
draggable: true,
center: {
lat: 30.241532,
lng: -97.894202
}
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsService = new google.maps.DirectionsService();
loadRoute1();
loadRoute2();
}
initialize();
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
有什么建议吗？
答案 0 :(得分：0)
试试这个，您需要将yourkey替换为文档底部的google api密钥
<html>
<head>
<title>Hello World</title>
<style>
body, html, #map {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YourKey"></script>
</head>
<body>
<div id="map"></div>
<script>
var map;
var directionsService;
var bounds = new google.maps.LatLngBounds();
var polyline1 = new google.maps.Polyline({
path: [],
strokeColor: "#DD71D8",
strokeWeight: 1
});
var polyline2 = new google.maps.Polyline({
path: [],
strokeColor: "#0000ff",
strokeWeight: 1
});
var polyline3 = new google.maps.Polyline({
path: [],
strokeColor: "#ff0000",
strokeWeight: 8
});
function loadRoute1() {
var request = {
origin: new google.maps.LatLng(30.244517, -97.892271),
destination: new google.maps.LatLng(30.244517, -97.892271),
waypoints: [{
location: new google.maps.LatLng(30.241532, -97.894202)
}, {
location: new google.maps.LatLng(30.240374, -97.891633)
}, {
location: new google.maps.LatLng(30.244220, -97.890442)
}],
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
result.draggable = true;
var renderer = new google.maps.DirectionsRenderer({
draggable: false, // true,
polylineOptions: {
strokeColor: "#DD71D8",
strokeWeight: 1
},
map: map
});
var path = result.routes[0].overview_path;
var legs = result.routes[0].legs;
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++) {
polyline1.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
polyline1.setMap(map);
if (polyline2.getPath().getLength() > 1) {
getPolylineIntersection();
}
renderer.setDirections(result);
}
});
}
function loadRoute2() {
var request = {
origin: new google.maps.LatLng(30.244220, -97.890426),
destination: new google.maps.LatLng(30.244220, -97.890426),
waypoints: [{
location: new google.maps.LatLng(30.243312, -97.890877)
}, {
location: new google.maps.LatLng(30.242431, -97.891601)
}, {
location: new google.maps.LatLng(30.243145, -97.893156)
}, {
location: new google.maps.LatLng(30.242357, -97.893811)
}, {
location: new google.maps.LatLng(30.241671, -97.891783)
}],
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
result.draggable = true;
var renderer = new google.maps.DirectionsRenderer({
draggable: false, // true,
polylineOptions: {
strokeColor: "#0000ff",
strokeWeight: 1
},
map: map
});
var path = result.routes[0].overview_path;
var legs = result.routes[0].legs;
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++) {
polyline2.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
polyline2.setMap(map);
if (polyline1.getPath().getLength() > 1) {
getPolylineIntersection();
}
renderer.setDirections(result);
}
});
}
function getPolylineIntersection() {
var commonPts = [];
for (var i = 0; i < polyline1.getPath().getLength(); i++) {
for (var j = 0; j < polyline2.getPath().getLength(); j++) {
if (polyline1.getPath().getAt(i).equals(polyline2.getPath().getAt(j))) {
commonPts.push({
lat: polyline1.getPath().getAt(i).lat(),
lng: polyline1.getPath().getAt(i).lng(),
route1idx: i
});
}
}
}
var path = [];
var prevIdx = commonPts[0].route1idx;
for (var i = 0; i < commonPts.length; i++) {
if (commonPts[i].route1idx <= prevIdx + 1) {
path.push(commonPts[i]);
prevIdx = commonPts[i].route1idx;
} else {
var polyline = new google.maps.Polyline({
map: map,
path: path,
strokeWeight: 8,
strokeColor: "#ff0000"
});
path = [];
prevIdx = commonPts[i].route1idx;
}
}
var polyline = new google.maps.Polyline({
map: map,
path: path,
strokeWeight: 8,
strokeColor: "#ff0000"
});
}
function initialize() {
var mapOptions = {
zoom: 16,
draggable: true,
center: {
lat: 30.241532,
lng: -97.894202
}
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsService = new google.maps.DirectionsService();
loadRoute1();
loadRoute2();
}
initialize();
</script>
</body>
</html>
修改了修补程序