我试图通过提供航点（大于8）来使用DirectionService API绘制路线。由于DirectionService API允许最多8个航点（一般用途），我递归调用过程航点，一次8点。
每当它试图在＆＃34; setDirections＆＃34;中绘制路线时方法，它的抛出错误说＆＃34; Uncaught TypeError：无法读取属性＆＃39; lat＆＃39; of null＆＃34;。
JavaScript代码（geojson_2.js）：
function RouteService(oGoogleMaps, oMap) {
var requestArray = [], renderArray = [], data, limit, index = 0, MAX_WAY_POINT_ALLOWED = 20;
var directionService = new oGoogleMaps.DirectionsService({
map: oMap
});
var nextRequest = function () {
index++;
if (index >= requestArray.length) {
return;
}
makeRequests(requestArray[index]);
};
this.getVariables = function (sVariable) {
return eval(sVariable);
};
var directionResults = function (result, status) {
if (status == oGoogleMaps.DirectionsStatus.OK) {
// Create a unique DirectionsRenderer 'i'
renderArray[index] = new oGoogleMaps.DirectionsRenderer();
// Some unique options from the colorArray so we can see the routes
renderArray[index].setOptions({
preserveViewport: true,
suppressInfoWindows: true,
polylineOptions: {
strokeWeight: 4,
strokeOpacity: 0.8
},
markerOptions: {
icon: {
path: oGoogleMaps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 3
}
},
map : oMap
});
// Use this new renderer with the result
renderArray[index].setDirections(result);
}
nextRequest();
};
var makeRequests = function (oRequest) {
directionService.route(oRequest.request, directionResults);
};
this.generateRequests = function (oResponseData) {
requestArray = [];
var lastpoint = null, waypts = [];
for (var waypoint = 0, limit = oResponseData.length; waypoint < limit; waypoint++) {
if (lastpoint && (lastpoint.lng() === oResponseData[waypoint].lng() && lastpoint.lat() === oResponseData[waypoint].lat())) {
// Duplicate of of the last waypoint - don't process
continue;
}
lastpoint = oResponseData[waypoint]
waypts.push({
location: oResponseData[waypoint],
stopover: true
});
}
var start, finish, routeIndex = 0, maxRequest = Math.ceil(oResponseData.length / MAX_WAY_POINT_ALLOWED);
for (var pointCount = 0; routeIndex < maxRequest; routeIndex++, pointCount = pointCount + MAX_WAY_POINT_ALLOWED) {
var tempWayPts = waypts.slice(pointCount, pointCount + MAX_WAY_POINT_ALLOWED);
// Grab the first waypoint for the 'start' location
start = (tempWayPts.shift()).location;
// Grab the last waypoint for use as a 'finish' location
finish = tempWayPts.pop();
if (finish === undefined) {
// Unless there was no finish location for some reason?
finish = start;
} else {
finish = finish.location;
}
var request = {
origin: start,
destination: finish,
waypoints: tempWayPts,
travelMode: oGoogleMaps.TravelMode.DRIVING
};
requestArray.push({"routeIndex": routeIndex, "request": request});
}
makeRequests(requestArray[index]);
}
};
function MapService() {
var routeService = null;
var oGoogleMaps = google.maps, oMap, oMapOptions = {
minZoom: 2,
zoom: 3,
panControl: true,
panControlOptions: {
position: oGoogleMaps.ControlPosition.TOP_LEFT
},
zoomControl: true,
zoomControlOptions: {
style: oGoogleMaps.ZoomControlStyle.SMALL,
position: oGoogleMaps.ControlPosition.TOP_LEFT
},
scaleControl: true,
mapTypeControl: true,
streetViewControl: true,
overviewMapControl: true,
mapTypeId: oGoogleMaps.MapTypeId.ROADMAP,
styles: [
{
featureType: "water",
elementType: "geometry",
stylers: [{
color: '#4eb4e5'
}, {
saturation: -10
}, {
lightness: 40
}]
}, {
featureType: "road",
stylers: [{
hue: '#ffc000'
}, {
saturation: -30
}, {
lightness: 10
}]
}, {
featureType: "poi",
stylers: [{
hue: '#8CC63F'
}, {
saturation: -10
}, {
lightness: 10
}]
}]
};
this.getVariables = function (sVariable) {
var result;
if ((result = eval(sVariable)) != undefined) {
result = routeService.getVariables(sVariable);
}
return result;
};
this.loadMap = function (targetDiv) {
oMap = new oGoogleMaps.Map(document.getElementById(targetDiv), oMapOptions);
routeService = new RouteService(oGoogleMaps, oMap);
//plotRoutes(oMap);
//some = oMap.data.addGeoJson(oPolyLinePath);
// To delete the path
// oMap.data.remove(some[0]);
};
this.plotRoutes = function () {
var oRouteMap = [
new oGoogleMaps.LatLng("29.968313", "-95.4155288"),
new oGoogleMaps.LatLng("29.9673186", "-95.40616060000002"),
new oGoogleMaps.LatLng("29.9658338", "-95.4150376"),
new oGoogleMaps.LatLng("29.9682822", "-95.4153981"),
new oGoogleMaps.LatLng("29.9679707", "-95.41517220000003"),
new oGoogleMaps.LatLng("29.9679707", "-95.41517220000003"),
new oGoogleMaps.LatLng("29.9682842", "-95.41553049999999"),
new oGoogleMaps.LatLng("29.9682842", "-95.41553049999999"),
new oGoogleMaps.LatLng("29.9682877", "-95.41551320000002"),
new oGoogleMaps.LatLng("29.9682707", "-95.41550280000001"),
new oGoogleMaps.LatLng("29.9682878", "-95.4155169"),
new oGoogleMaps.LatLng("29.9682721", "-95.41551179999999"),
new oGoogleMaps.LatLng("29.9682784", "-95.41550799999999"),
new oGoogleMaps.LatLng("29.9682884", "-95.41551449999997"),
new oGoogleMaps.LatLng("29.968295", "-95.41549050000003"),
new oGoogleMaps.LatLng("29.9682868", "-95.41547450000002"),
new oGoogleMaps.LatLng("29.9682774", "-95.41546470000003"),
new oGoogleMaps.LatLng("29.9682871", "-95.4154163"),
new oGoogleMaps.LatLng("29.9683139", "-95.41551659999999"),
new oGoogleMaps.LatLng("29.9683222", "-95.4155614"),
new oGoogleMaps.LatLng("29.9683159", "-95.41555370000003"),
new oGoogleMaps.LatLng("29.9683428", "-95.41555949999997"),
new oGoogleMaps.LatLng("29.9683213", "-95.41557449999999"),
new oGoogleMaps.LatLng("29.9683153", "--95.4155255"),
new oGoogleMaps.LatLng("29.9683094", "-95.4155313"),
new oGoogleMaps.LatLng("29.9683223", "-95.41553329999999"),
new oGoogleMaps.LatLng("29.9682942", "-95.41538589999999"),
new oGoogleMaps.LatLng("29.965987", "-95.40982959999997")
];
routeService.generateRequests(oRouteMap);
}
};
$(document).ready(function () {
var mapService = new MapService();
mapService.loadMap("mapDiv");
mapService.plotRoutes();
});
HTML代码：
<div id="mapDiv"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=weather,places&sensor=false"></script>
<script type="text/javascript" src="geojson_2.js"></script>
任何人都可以帮助我解决这个问题。
由于
答案 0 :(得分：0)
要尝试的内容 - 使用waypts撰写oResponseData.reduce()，如下所示：
var waypts = oResponseData.reduce(function(a, waypoint) {
var lastpoint = a[a.length - 1];
if( !lastpoint || !waypoint.equals(lastpoint.location) ) {
a.push({ location:waypoint, stopover:true });
}
return a;
}, []);
这应该更可靠，但我不确定它是否能解决问题。您最终可能会得到一个空数组，而不会抛出错误。