我可以在谷歌地图路线上放置多少个标记?

时间:2011-07-13 09:43:58

标签: google-maps

我可以在google地图路线上放置多少个标记? 如果是的话,如何克服它?

我的开发人员说他不能在路线上添加超过10个标记! 是的,在这种情况下,我无法在网络上找到任何内容。

TIA

2 个答案:

答案 0 :(得分:5)

根据v3的documentation

  

允许的最大航点为8,加上原点和目的地。   Maps API Premier客户可以使用23个航点,加上原点,   和目的地。

所以,是的,当你包括开始和结束时,限制是10。因此,如果您想要更多,可以升级到Maps Premier($$)或尝试解决它。

可能的解决方法是:

  • 以9个为一组的彼此最接近的分组航路点
  • 为每个组做方向,每个组的起点是最后一组的结束点
  • 如果您可以允许用户指定订单而不是优化代码,那么
  • 会更容易
  • distance matrix功能可能有助于确定航点之间的距离,因为它的点数限制较高。

另一种解决方法是返回到谷歌地图API V2,仍然appears有更大的25限制。

最后一个解决方法是自己实现traveling salesman problem,但这并非易事。

答案 1 :(得分:0)

可以放置多个标记,这意味着超过10个标记 我也在我的项目中使用过。我在项目中使用了ajax功能。 以及对需要此要求的人有用的总代码是

   function positionCheck(){
    var username = $("#xmlLabel").val();
    var searchDate = $("#searchDate").val();
    if (username != "" && searchDate != '') {
        //$('#searchLoc').attr('action', "<c:url value='/searchLocationnormal.mnt'/>").submit(); 
        $.ajax({
            type : "POST",
            url : "searchLocation.mnt",
            data : "xmlLabel=" + username + "&searchDate=" + searchDate,
            dataType : "json",
            mimeType : 'application/json',
            success : function(data) {
                if (data != "") {
                    initialize(data);
                    //setTimeout(function(){ }, 5000);
                } else {
                alert("No data available ");
                }
            },
            error : function(e) {
                alert('Error: ' + e, "Alert Box");
            }
        });
    }

var stops=0;
var counts = 0;
var size = 0;

function initialize(data) {
    size = 0;
    counts = 0;
    stops = data;
    size = stops.length;

        if (stops.length > 0) {
            var map = new window.google.maps.Map(document
                    .getElementById("map"));
            // new up complex objects before passing them around
            var directionsDisplay = new window.google.maps.DirectionsRenderer(
                    {
                        suppressMarkers : true,
                        polylineOptions : {
                            strokeColor : "black"
                        }
                    });
            var directionsService = new window.google.maps.DirectionsService();
            Tour_startUp(stops);
            window.tour.loadMap(map, directionsDisplay);
            window.tour.fitBounds(map,stops);
            /* if (stops.length > 1) */
                window.tour.calcRoute(stops,directionsService,
                        directionsDisplay,size);
        }
}


function Tour_startUp(stops) {
    var stops=stops;
    var counts=0;
    if (!window.tour) window.tour = {
        // map: google map object
        // directionsDisplay: google directionsDisplay object (comes in empty)
        loadMap: function (map, directionsDisplay) {
            var myOptions = {
                zoom:10,
                center: new window.google.maps.LatLng(17.379818, 78.478542), // default to Hyderabad
                mapTypeId: window.google.maps.MapTypeId.ROADMAP
            };
            map.setOptions(myOptions);
            directionsDisplay.setMap(map);
        },
        fitBounds: function (map,stops) {
            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.latitude, val.longitude);
                bounds.extend(myLatlng);
            });
            map.fitBounds(bounds);

        },

这里是问题的主要逻辑“我可以在google地图路线上放置多少个标记?” 答案:是的可能

        calcRoute: function (stops,directionsService, directionsDisplay,size) {
            size=size;
            var batches = [];
            var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints
            var itemsCounter = 0;
            var wayptsExist = stops.length > 0;
            var tempp=0;
            while (wayptsExist) {
                var subBatch = [];
                var subitemsCounter = 0;

                for (var j = itemsCounter; j < stops.length; j++) {
                    subitemsCounter++;
                    tempp++;
                    subBatch.push({

                        location: new window.google.maps.LatLng(stops[j].latitude, stops[j].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;

            for (var k = 0; k < batches.length; k++) {
                var lastIndex = batches[k].length - 1;
                var start = batches[k][0].location;
               //delay(600); 
                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.WALKING
                };
                (function (kk) {
                    directionsService.route(request, function (result, status) {
                        if (status == window.google.maps.DirectionsStatus.OK) {
                            var unsortedResult = { order: kk, result: result };
                            unsortedResults.push(unsortedResult);
                            //alert("count test");
                            directionsResultsReturned++;
                            if (directionsResultsReturned == 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;
                                var summaryPanel = document.getElementById('directions_panel');
                                summaryPanel.innerHTML = '';
                                var totdist=0;
                                for (var i=0; i < legs.length;i++){

                                     var markerletter = "A".charCodeAt(0);
                                     var markerletter2= "B".charCodeAt(0)
                                         markerletter += i;
                                    markerletter2 += i; 
                                  markerletter = String.fromCharCode(markerletter);
                                  markerletter2 = String.fromCharCode(markerletter2);
                                  createMarker(directionsDisplay.getMap(),legs[i].start_location,legs[i].start_address,markerletter,size);//To display location address on the marker
                                  var routeSegment = i + 1;
                                  var point=+routeSegment+1;
                                  summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
                                  summaryPanel.innerHTML += '<b>Point '+ routeSegment +' :</b>'+ '  ' +legs[i].start_address + ' <br> ';
                                  summaryPanel.innerHTML += '<b>Point '+ point +' :</b>'+ '  '+legs[i].end_address + '<br>';
                                  summaryPanel.innerHTML += '<b>Distance Covered '+' :</b>'+legs[i].distance.text + '<br><br>';
                                  var test=legs[i].distance.text.split(' ');
                                  var one=parseFloat(test[0]);
                                if(test[1]=="m"){
                                  var one=parseFloat(test[0]/1000); 
                                  }
                                  totdist=parseFloat(totdist)+parseFloat(one);
                                }
                                summaryPanel.innerHTML += '<b> Total Distance :'+totdist + 'km'+ '</b><br><br>';
                                var i=legs.length;
                                var markerletter = "A".charCodeAt(0);
                    markerletter += i;
                                markerletter = String.fromCharCode(markerletter);
                                createMarker(directionsDisplay.getMap(),legs[legs.length-1].end_location,legs[legs.length-1].end_address,markerletter,size);
                            }
                        }
                    });
                })(k);
                function delay(ms) {
                       ms += new Date().getTime();
                       while (new Date() < ms){}
                    }
            }
        }//calculate route end
    };
}



//to show information on clicking marker
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(iconStr,size) {
    counts++;
    if(counts==size){
        var markerimageLoc = "http://www.maps.google.com/mapfiles/ms/icons/blue.png";
        counts = 0;
    }else{
   if (iconStr=="undefined") { 
      iconStr = "red"; 
      var markerimageLoc = "http://www.maps.google.com/mapfiles/ms/icons/red.png"; 
   }
   else{
        var markerimageLoc="http://www.google.com/mapfiles/marker"+ iconStr +".png"; 
      //  var markerimageLoc = "http://www.maps.google.com/mapfiles/ms/icons/red.png";   
   }
    }
      icons[iconStr] = new google.maps.MarkerImage(markerimageLoc,
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(25, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 6,20.
      new google.maps.Point(9, 34));
   return icons[iconStr];

}
  // 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 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 &lt;area&gt; 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, character,size) {
        var markerletter = character;
        var size=size;
        if (/[^a-zA-Z]/.test(character)) {
            var markerletter = "undefined";
        }
        var contentString = '<b>' + label + '</b><br>';
        var marker = new google.maps.Marker({
            position : latlng,
            map : map,
            shadow : iconShadow,
            icon : getMarkerImage(markerletter,size),
            shape : iconShape,
            title : label,
            zIndex : Math.round(latlng.lat() * -100000) << 5
        });
        marker.myname = label;

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString);
            infowindow.open(map, marker);
        });
        return marker;
    }
}

以下是我的项目的屏幕截图

click here to show Screen shot