我一直在开源街景播放器(http://StreetViewPlayer.org),我有一个关于在新方向中添加新点的问题。
当用户添加新位置时,我需要知道用户是否已达到8个航路点限制。
有没有办法收到通知?
有人可以给我一些见解吗?
这是一个简单的代码来说明这一点(在达到8个航路点限制之前添加几个点):
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 35.694346, lng: -79.796409},
zoom: 13
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map
});
directionsDisplay.setMap(map);
directionsService.route({
origin: {lat: 35.694346, lng: -79.796409},
destination: {lat: 34.964737, lng: -80.060434},
waypoints: [
{location: {lat: 35.559346, lng: -80.089850}, stopover: true},
{location: {lat: 35.356588, lng: -79.899915}, stopover: true},
],
optimizeWaypoints: false,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
function show( v ) {
if ( v != undefined )
console.log( "new waypoint is # " + v );
}
directionsDisplay.addListener('directions_changed', function() {
var newDir = directionsDisplay.getDirections();
console.log( newDir );
show( newDir.request.Xc );
show( newDir.request.Yc );
show( newDir.request.Uc );
show( newDir.request.Vc );
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>
答案 0 :(得分:0)
总点数(原点,目的地,加上任何航点)等于var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 35.694346,
lng: -79.796409
},
zoom: 13
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map
});
directionsDisplay.setMap(map);
directionsService.route({
origin: {
lat: 35.694346,
lng: -79.796409
},
destination: {
lat: 34.964737,
lng: -80.060434
},
waypoints: [{
location: {
lat: 35.559346,
lng: -80.089850
},
stopover: true
}, {
location: {
lat: 35.356588,
lng: -79.899915
},
stopover: true
}, ],
optimizeWaypoints: false,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
function show(v) {
if (v != undefined)
console.log("new waypoint is # " + v);
}
directionsDisplay.addListener('directions_changed', function() {
var newDir = directionsDisplay.getDirections();
document.getElementById('waypoints').innerHTML = newDir.geocoded_waypoints.length;
console.log("there are " + (newDir.geocoded_waypoints.length - 2) + " waypoints");
console.log(newDir);
show(newDir.request.Xc);
show(newDir.request.Yc);
show(newDir.request.Uc);
show(newDir.request.Vc);
});
}
google.maps.event.addDomListener(window, "load", initMap);
数组的长度。从中减去2以获得路线请求中的“航路点”数量。
代码段
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="waypoints"></div>
<div id="map"></div>
if (email = /\A([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})\Z/i)