2011-07-13 7 views
3

Googleマップルートに置くことができるマーカーの数には制限がありますか? はいの場合、それを克服する方法はありますか?Googleマップルートに置くことができるマーカーの数には制限がありますか?

私の開発者は、ルートに10個以上のマーカーを追加できないと言いました。 はい、私はこの文脈でウェブ上で何かを見つけることができません。 v3のdocumentationによれば

TIA

答えて

5

最大許容ウェイポイントは、8、プラス起源、および宛先です。 Maps API Premierのお客様には、23ウェイポイント、原点、 および目的地が指定できます。

したがって、開始と終了を含めると、制限は10です。したがって、それ以上のものが必要な場合は、マッププレミア($$)にアップグレードするか、回避することができます。

可能仕事は周りにある:

  • グループの終点であること、各グループの出発点と、各グループの方向を行い、互い
  • に最も近い9のグループの中間地点最後のグループ
  • あなたはそれが数の上限を持っているように、ユーザーは、それが簡単に
  • distance matrix機能は、ウェイポイント間の距離を把握助けることかもしれ作ること、代わりにコードを最適化する順序を指定できるようにすることができた場合ポイント。

周りのもう一つの仕事はまだappearsが大きな25の限界を持っているGoogleマップAPI V2に戻って行くことです。

最後の回避策はtraveling salesman problemの独自の実装ですが、これは簡単なことではありません。

+0

おかげで、1つのより多くの情報私のプロジェクトのスクリーン・ショットですか?何が今価格はまだ$ 10kですか? – shikhar

+0

私は、あなたが有料の製品でそれを使用しているのか、イントラネットで内部的に使用しているのかによってそれが異なると思います。私は、あなたがエンドユーザーに請求している場合、価格は17kのようなものに上昇したと思います。 – Mark

+0

情報のありがとうマーク – shikhar

0

複数のマーカーを配置することができます。これは、私のプロジェクトでも使用されています。私のプロジェクトでは、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マップのルートに置くことができますどのように多くのマーカー上の制限はありますか?」 ANSWER:あなたが持っている場合 YESことが可能

 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

関連する問題