1
첫 번째로 나는 Google Maps Javascript API v3의 경험이 없다고 말하고 싶습니다. (내 유일한 경험은 지난 3 일간입니다.) 나는 마커의 목록과지도를 표시하고 DirectionsService를 사용하여 연결을 관리했다, 그러나 때때로 내 목록은 매우 크고, 나는 다음과 같은 오류 얻을 :요청 엔터티가 너무 큽니다. - Google지도 길 찾기 오류 413
// List of all locations for device
var locations = [];
// example: locations = [
// {datetime: '2014/09/28 20:20', location: '41.99999 21.99999 30.0'},
// ... {...} ... may be more than 200 entries for locations
// {datetime: '2014/09/28 20:25', location: '41.99999 21.99999 30.0'}
// ]
var map;
var markers = [];
var bounds = new google.maps.LatLngBounds();
var pathPoints = [];
var infoWindow = new google.maps.InfoWindow();
var accuracy = new google.maps.Circle({
fillColor: '#ff4080',
fillOpacity: 0.5,
strokeOpacity: 0,
zIndex: 0
});
var path = new google.maps.Polyline(polyOptions);
var geocoder;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay;
var polyOptions = {
geodesic: true,
strokeColor: '#28b8b8',
strokeOpacity: 1.0,
strokeWeight: 8,
zIndex: 1
}
function showInfoWindow(marker, datetime, acc){
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'latLng': marker.getPosition()
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
infoWindow.close();
var date = datetime.split(" ")[0];
var time = datetime.split(" ")[1];
var content = '<div class="infowindow">'
+ results[1].formatted_address.trim() + '<br />'
+ 'Date: ' + date + '<br />'
+ 'Time: ' + time + '<br />'
+ 'Accuracy: ' + acc + 'm'
+ '</div>';
infoWindow.setContent(content);
infoWindow.open(map, marker);
accuracy.setMap(null);
accuracy.setMap(map);
accuracy.setCenter(marker.getPosition());
accuracy.setRadius(acc/1.6);
} else {
// alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
}
function addMultiMarker(latLng, num, datetime, acc){
// Create marker at provided location
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: image_circle,
title: 'Location #' + num,
zIndex: num + 1
});
// On marker click center it inside map and show infoWindow
google.maps.event.addListener(marker, 'click', function() {
map.panTo(marker.getPosition());
showInfoWindow(marker, datetime, acc);
});
return marker;
}
function showRoute() {
var rendererOptions = {
draggable: false,
hideRouteList: true,
suppressMarkers: true,
infoWindow: infoWindow,
polylineOptions: polyOptions,
map: map
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var len = markers.length;
var start = markers[0].getPosition();
var end = markers[len - 1].getPosition();
new google.maps.event.trigger(markers[len - 1], 'click');
var wayPts = [];
for(var i = 1; i < len - 1; i++){
wayPts.push({
location: markers[i].getPosition(),
stopover: true
});
}
var request = {
origin: start,
destination: end,
waypoints: wayPts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function showMapPeriod(periodStart, periodEnd){
// Simple map options
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(41, 21),
mapTypeId : google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
panControl: false,
streetViewControl: false
};
$("#map").html("");
// Create and show map
openMapContainer(); // just a function that shows the map <div> element
map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Create and display markers
bounds = new google.maps.LatLngBounds();
markers = [];
var len = 0;
for(var i = periodStart; i <= periodEnd; i++, len++){
var loc_vals = locations[i].location.trim().split(" ");
var lat = parseFloat(loc_vals[0]);
var lng = parseFloat(loc_vals[1]);
var acc = parseFloat(loc_vals[2]);
// Create marker at provided location
var datetime = locations[i].datetime;
var latLng = new google.maps.LatLng(lat, lng);
markers[len] = addMultiMarker(latLng, len+1, datetime, acc);
bounds.extend(latLng);
}
showRoute();
map.fitBounds(bounds);
}
Failed to load resource: the server responded with a status of 413 (Request Entity Too Large)
을
글쎄, 내 코드가 부분적으로 작동하고, 누군가 내가이 문제를 제거하는데 도움을 줄 수 있다면, 나는 그것을 매우 고맙게 생각할 것이다. 더 잘 설명하기 위해 도로를 통해 위치를 연결하는 많은 방법 (200+ 개) 또는 일부 방법으로 Directions을 요청하는 솔루션이 필요합니다. (실제로 길 찾기가 필요하지는 않지만 연결하고 싶지는 않습니다. 위치는 간단합니다 Polyline).
편집 : Here 간단한 해독을 제공하여 문제를 보시려면 line 15에서 주석을 제거하십시오.
문제가있는 예제를 제공해주십시오. – geocodezip
문제점을 표시하려면 어떻게 변경합니까? – geocodezip
여기이 피들 (http://jsfiddle.net/o3zqhsaz/6/)에서 포인트가 연결되어 있지 않다는 것을 알 수 있습니다 – kiko283