第二次来到地图页面错误显示时。您已在此页面上多次添加Google Maps API。这可能会导致意外错误。
这是我的代码。
在HTML中
<div id="googleMap" style="width: 100%;height:500px;"></div>
在州js
.STATE（＆＃34; restricted.ntrack.manage路线＆＃34; {URL：＆＃34; /管理路由＆＃34;，templateUrl：＆＃39;应用程序/组件/ ntrack / manage- route / manage-route.html＆＃39;，resolve：{deps [＆＃39; $ ocLazyLoad＆＃39;，function（$ ocLazyLoad）{return $ ocLazyLoad.load（[＆＃39; lazy_parsleyjs＆＃39;，＆＃ 39;应用程序/组件/ ntrack /管理路由/ routeDetails.js＆＃39;＆＃34;！JS http://maps.googleapis.com/maps/api/js?key=AIzaSyBEv2lW0vZjUHl5eMyqoUfT1xLVOFMwGlU&sensor=false&libraries=places,geometry&language=en＆＃34;，＆＃39;！JS https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js＆＃39; ，＆＃39; lazy_google_maps＆＃39;，]）;}]，}，数据：{pageTitle：＆＃39;创建路线＆＃39;}}）
在js控制器
中function getValues() {
// Assign empty array for model, start waypoints and distnation WayPoint
$scope.manageRoute = {};
$scope.originWayPoint = [];
$scope.distnationWayPoint = [];
// Assign the empty array for model value
$scope.routes = [];
// Ajax url passed in get method to get the needed route values
rest.path = 'manage-routes/read-route';
rest.get().success(function (result) {
// allocating dependency datas to respective models
$scope.routes = result;
var directionsService = new google.maps.DirectionsService();
var flightPlanCoordinates = [];
// Assign the google map infowindow to new variable
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
// Assign a map option
var mapOptions = {
myTypeId : google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapOptions);
// Iterate the loop to get location & route details to diaply in map
for (var i = 0; i < $scope.routes.length; i++) {
var routeName = $scope.routes[i].route_name;
if (($scope.routes[i].start_latitude != null) && ($scope.routes[i].start_longitude != null)) {
$scope.locationDetails = [];
// Assign array of latitude and longitude of orign to new variable
var origin = [$scope.routes[i].start_latitude, $scope.routes[i].start_longitude];
// Assign name of orign to new variable
var originName = $scope.routes[i].start_point;
// Assign array of latitude and longitude of destination to new variable
var destination = [$scope.routes[i].destination_latitude, $scope.routes[i].destination_longitude];
// Assign name of destination to new variable
var destinationName = $scope.routes[i].destination_point;
// Assign passenger count to new variable
var totalPassenger = $scope.routes[i].total_passenger;
// Iterate the loop to get waypoint location & route details to diaply in map
for(var j = 0; j < $scope.routes[i].stop_details.length;j++) {
if (($scope.routes[i].stop_details[j].latitude != null) && ($scope.routes[i].stop_details[j].longitude != null)) {
// Push the vale to the array variable
$scope.locationDetails.push({'location':
$scope.routes[i].stop_details[j].latitude+
','+$scope.routes[i].stop_details[j].longitude+
','+$scope.routes[i].stop_details[j].location+
','+$scope.routes[i].stop_details[j].passenger_count+
','+$scope.routes[i].stop_details[j].stop_time+
','+$scope.routes[i].stop_details[j].stop_distance
});
var wayPointDetails = $scope.locationDetails;
}
}
// Assign waypoints latitude and longitude of destination to new variable
var waypoints = $scope.routes[i].lat_lang;
// Generate random color to the route
var random_color = '#'+Math.floor(Math.random()*16777215).toString(16);
// Call a function to display marker & way to the user in map
calcRoute(routeName,origin,destination,waypoints,originName,destinationName,totalPassenger,wayPointDetails,random_color);
}
}
function pinSymbol(color) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 2
};
}
//function for claculate the route distance
function calcRoute(routeName,origin, destination, waypoints, originName, destinationName,totalPassenger, wayPointDetails, strokecolor){
//variable declaration for map
var request = {
origin : new google.maps.LatLng(origin[0],origin[1]),
destination : new google.maps.LatLng(destination[0],destination[1]),
waypoints : waypoints,
travelMode : google.maps.TravelMode.DRIVING
};
var firstStop = wayPointDetails[0].location.split(',');
var firstStopLatLng = firstStop[0]+','+firstStop[1];
var originLatLng = origin[0]+','+origin[1];
if (originLatLng != firstStopLatLng) {
// Custom marker with more than one char for origin
var originMarker = new MarkerWithLabel({
position: new google.maps.LatLng(origin[0],origin[1]),
map: map,
draggable: false,
raiseOnDrag: false,
labelContent: "START",
labelAnchor: new google.maps.Point(15, 65),
labelClass: "labels", // the CSS class for the label
labelInBackground: false,
icon: pinSymbol(strokecolor)
});
// Display the details in map marker
google.maps.event.addListener(originMarker, 'click', (function(originMarker, i) {
return function() {
/*if (originLatLng == firstStopLatLng) {
var originDescription = "Route Name : "+routeName+"<br>Stop Name :"+firstStop[2]+"<br>Total Passenger : "+totalPassenger+"<br>Passenger Count : "+firstStop[3]+
"<br>Time : "+firstStop[4]+"<br>Distance : "+firstStop[5];
} else {*/
var originDescription = "Route Name : "+routeName+"<br>Origin : "+originName+"<br>Total Passenger : "+totalPassenger;
/*}*/
infowindow.setContent(originDescription);
infowindow.open(map, originMarker);
}
})(originMarker, i));
}
var lastStop = wayPointDetails[wayPointDetails.length-1].location.split(',');
var lastStopLatLng = lastStop[0]+','+lastStop[1];
var destinationLatLng = destination[0]+','+destination[1];
if (destinationLatLng != lastStopLatLng) {
// Custom marker with more than one char for destination
var destMarker = new MarkerWithLabel({
position: new google.maps.LatLng(destination[0],destination[1]),
map: map,
draggable: false,
raiseOnDrag: false,
labelContent: "END",
labelAnchor: new google.maps.Point(15, 65),
labelClass: "labels", // the CSS class for the label
labelInBackground: false,
icon: pinSymbol(strokecolor)
});
// Display the details in map marker
google.maps.event.addListener(destMarker, 'click', (function(destMarker, i) {
return function() {
infowindow.setContent("Route Name : "+routeName+"<br>Destination :"+destinationName+"<br>Total Passenger : "+totalPassenger);
infowindow.open(map, destMarker);
}
})(destMarker, i));
}
// Assign the google map infowindow to new variable
var infowindow = new google.maps.InfoWindow({
content: ""
});
// Iterate the loop to get waypoint location & details to diaply in map
for (var waypointsMarker = 0; waypointsMarker < wayPointDetails.length ; waypointsMarker++) {
var splitLatLng = wayPointDetails[waypointsMarker].location.split(',');
if ((waypointsMarker == 0) && (originLatLng == firstStopLatLng)) {
var labelContentName = "START";
var description = "Route Name : "+routeName+"<br>Stop Name :"+splitLatLng[2]+"<br>Total Passenger : "+totalPassenger+
"<br>Passenger Count : "+splitLatLng[3]+
"<br>Time : "+splitLatLng[4]+"<br>Distance : "+splitLatLng[5];
} else if ((waypointsMarker == (wayPointDetails.length-1)) && (destinationLatLng == lastStopLatLng)) {
var labelContentName = "END";
var description = "Route Name : "+routeName+"<br>Stop Name :"+splitLatLng[2]+"<br>Total Passenger : "+totalPassenger+
"<br>Passenger Count : "+splitLatLng[3]+
"<br>Time : "+splitLatLng[4]+"<br>Distance : "+splitLatLng[5];
} else {
var labelContentName = splitLatLng[2].slice(0,4);
var description = "Route Name : "+routeName+"<br>Stop Name :"+splitLatLng[2]+"<br>Passenger Count : "+splitLatLng[3]+
"<br>Time : "+splitLatLng[4]+"<br>Distance : "+splitLatLng[5];
}
var waypointsMarkers = new MarkerWithLabel({
position: new google.maps.LatLng(splitLatLng[0],splitLatLng[1]),
map: map,
draggable: false,
raiseOnDrag: false,
labelContent: labelContentName,
labelAnchor: new google.maps.Point(15, 65),
labelClass: "labels", // the CSS class for the label
labelInBackground: false,
icon: pinSymbol(strokecolor)
});
wayPointsInfoWindow(waypointsMarkers, map, infowindow, description);
}
// Function used to display details of the location when click the marker in map
function wayPointsInfoWindow(marker, map, infowindow, description) {
marker.addListener('click', function() {
infowindow.setContent(description);
infowindow.open(map, this);
});
}
//declare route for the map
directionsService.route(request,function(response,status) {
if(status == google.maps.DirectionsStatus.OK){ //if map orute is set
// directionsDisplay.setDirections(response); //display the map
new google.maps.DirectionsRenderer({
map: map,
directions: response,
draggable:false,
polylineOptions: {
strokeColor: strokecolor
},
suppressMarkers : true,
});
}
});
}
}).error(function(data) {
// If any issue in loading data thown an error message
UIkit.modal.alert("We are fixing a temporary technical issue. We will be back shortly. Please try again in some time(NETWORK ERROR)");
});
}