我有一张谷歌地图，几周前它还运行良好。
我的问题是，现在所有标签标记都出现在正确的位置，但只出现最后一张图像。
我在生成的 html 代码中看到所有图像都在这里，但它们都具有相同的位置(这就是为什么我只能看到最后一个)。
我再说一遍:我确定它之前是有效的!也许谷歌已经改变了一些东西(我正在调用脚本:https://maps.googleapis.com/maps/api/js?sensor=false)。
这是我的代码:
jQuery(function() {
var stops = [];
var nbPoints = $('#nbPoints').val();
for (var i = 1; i <= nbPoints; i++) {
if($('#latitude'+i).val() && $('#longitude'+i).val())
stops.push({"Geometry":{"Latitude":$('#latitude'+i).val(),"Longitude":$('#longitude'+i).val()}});
}
var map = new window.google.maps.Map(document.getElementById("map_canvas"));
// new up complex objects before passing them around
var directionsDisplay = new window.google.maps.DirectionsRenderer({suppressMarkers: true});
var directionsService = new window.google.maps.DirectionsService();
Tour_startUp(stops);
window.tour.loadMap(map, directionsDisplay);
window.tour.fitBounds(map);
if (stops.length > 1)
window.tour.calcRoute(directionsService, directionsDisplay);
else $("#message").html("Erreur : Aucune coordonnée renseignée!");
});
function Tour_startUp(stops) {
if (!window.tour) window.tour = {
updateStops: function (newStops) {
stops = newStops;
},
// map: google map object
// directionsDisplay: google directionsDisplay object (comes in empty)
loadMap: function (map, directionsDisplay) {
var myOptions = {
zoom: 13,
center: new window.google.maps.LatLng($('#latitudeInit').val(),$('#longitudeInit').val()),
mapTypeId: window.google.maps.MapTypeId.ROADMAP
};
map.setOptions(myOptions);
directionsDisplay.setMap(map);
},
fitBounds: function (map) {
var bounds = new window.google.maps.LatLngBounds();
// extend bounds for each record
jQuery.each(stops, function (key, val) {
var myLatlng = new window.google.maps.LatLng(val.Geometry.Latitude, val.Geometry.Longitude);
bounds.extend(myLatlng);
});
map.fitBounds(bounds);
},
calcRoute: function (directionsService, directionsDisplay) {
var batches = [];
var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints
var itemsCounter = 0;
var wayptsExist = stops.length > 0;
while (wayptsExist) {
var subBatch = [];
var subitemsCounter = 0;
for (var j = itemsCounter; j < stops.length; j++) {
subitemsCounter++;
subBatch.push({
location: new window.google.maps.LatLng(stops[j].Geometry.Latitude, stops[j].Geometry.Longitude),
stopover: true
});
if (subitemsCounter == itemsPerBatch)
break;
}
itemsCounter += subitemsCounter;
batches.push(subBatch);
wayptsExist = itemsCounter < stops.length;
// If it runs again there are still points. Minus 1 before continuing to
// start up with end of previous tour leg
itemsCounter--;
}
// now we should have a 2 dimensional array with a list of a list of waypoints
var combinedResults;
var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort
//var directionsResultsReturned = 0;
var directionsResultsReturned = new Array();
directionsResultsReturned[0]=0;
for (var k = 0; k < batches.length; k++) {
var lastIndex = batches[k].length - 1;
var start = batches[k][0].location;
var end = batches[k][lastIndex].location;
// trim first and last entry from array
var waypts = [];
waypts = batches[k];
waypts.splice(0, 1);
waypts.splice(waypts.length - 1, 1);
var request = {
origin: start,
destination: end,
waypoints: waypts,
travelMode: window.google.maps.TravelMode.DRIVING
};
creerRoute(k,request,batches,directionsService,unsortedResults,combinedResults,directionsResultsReturned,directionsDisplay);
}
}
};
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
var icons = new Array();
icons["red"] = new google.maps.MarkerImage("mapIcons/marker_red.png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
function getMarkerImage(numero, type, anomalie) {
var url_img = "../img/";
var type = new String(type);
if(anomalie) url_img+="anomalie.png";
else{
switch(type.toUpperCase()){
case "LAVAGE" : url_img+="shower.png"; break;
case "EAU" : url_img+="waterdrop.png"; break;
default : url_img+="stop.png"; break;
}
}
icons[numero] = new google.maps.MarkerImage(url_img,
new google.maps.Size(34, 34),
new google.maps.Point(0,0),
new google.maps.Point(9, 34));
return icons[numero];
}
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var iconImage = new google.maps.MarkerImage('mapIcons/marker_red.png',
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(34, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 34),
new google.maps.Point(0,0),
new google.maps.Point(9, 34));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var iconShape = {
coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
type: 'poly'
};
function createMarker(map, latlng, label, html, numero, type, anomalie) {
var contentString = '<b>'+label+'</b><br>'+html;
var marker = new MarkerWithLabel({
position: latlng,
map: map,
draggable: false,
raiseOnDrag: true,
icon : getMarkerImage(numero,type,anomalie),
labelContent: numero,
labelAnchor: new google.maps.Point(0, 0),
labelClass: "labels",
labelInBackground: false
});
marker.myname = label;
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
return marker;
}
function creerRoute(kk,request,batches,directionsService,unsortedResults,combinedResults,directionsResultsReturned,directionsDisplay) {
directionsService.route(request, function (result, status) {
if (status == window.google.maps.DirectionsStatus.OK) {
var unsortedResult = { order: kk, result: result };
unsortedResults.push(unsortedResult);
directionsResultsReturned[0]++;
if (directionsResultsReturned[0] == batches.length) // we've received all the results. put to map
{
// sort the returned values into their correct order
unsortedResults.sort(function (a, b) { return parseFloat(a.order) - parseFloat(b.order); });
var count = 0;
for (var key in unsortedResults) {
if (unsortedResults[key].result != null) {
if (unsortedResults.hasOwnProperty(key)) {
if (count == 0) // first results. new up the combinedResults object
combinedResults = unsortedResults[key].result;
else {
// only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
// directionResults object, but enough to draw a path on the map, which is all I need
combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
}
count++;
}
}
}
directionsDisplay.setDirections(combinedResults);
var legs = combinedResults.routes[0].legs;
for (var i=0; i < legs.length;i++){
var j = i + 1;
var markerletter = $('#ordre'+j).val();
var anomalie=false;
var html = $('#infospoint'+j).val();
if($('#infoschocspoint'+j).length){
anomalie = true;
html+="<br/>"+$('#infoschocspoint'+j).val();
}
createMarker(directionsDisplay.getMap(),legs[i].start_location,$('#titrepoint'+j).val(),html,markerletter,$('#type'+j).val(),anomalie);
}
var i=legs.length + 1;
var markerletter = $('#ordre'+i).val();
var anomalie=false;
var html = $('#infospoint'+i).val();
if($('#infoschocspoint'+i).length){
anomalie = true;
html+="<br/>"+$('#infoschocspoint'+i).val();
}
createMarker(directionsDisplay.getMap(),legs[legs.length-1].end_location,$('#titrepoint'+i).val(),html,markerletter,$('#type'+i).val(),anomalie);
}
}else {
if (status == window.google.maps.DirectionsStatus.OVER_QUERY_LIMIT) {
setTimeout( function(){
creerRoute(kk,request,batches,directionsService,unsortedResults,combinedResults,directionsResultsReturned,directionsDisplay);
}, 200);
}else{
$("#message").html("Erreur : Code "+status);
}
}
});
}
有人遇到同样的问题吗？
感谢您的帮助!
最佳答案
你可以用新的
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3.3"></script>
关于javascript - 标记图像未显示，仅显示最后一张，因为 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22834809/