1. дома
  2. Вопрос и ответ
  3. Google Map направление с несколькими направлениями с цветами

Google Map направление с несколькими направлениями с цветами

2016-07-19 3 views
-2

мне нужно заполнить следующие данные о направлении картеGoogle Map направление с несколькими направлениями с цветами

dataset 1 
    [ 
     [lat, lon], 
     [lat, lon], 
     [lat, lon], 
    ], 
dataset 2 
    [ 
     [lat, lon], 
     [lat, lon], 
     [lat, lon], 
    ], 
So On ...

Все наборы данных должны иметь маршрут с уникальным цветом и любой набор данных может превышать 8 путевых точек ограничения. Я могу исправить ограничение в 8 пунктов за счет следующих онлайн-уроков, таких как https://lemonharpy.wordpress.com/2011/12/15/working-around-8-waypoint-limit-in-google-maps-directions-api/ и Plotting more than 8 waypoints in Google Maps v3.

Но я не нашел способа получить разный цветной маршрут для каждого набора данных.

Это мой код

<style> 
#map { 
     height: 1080px; 
     width: 100%; 
     border: 1px solid #000; 
    } 

</style> 

<div id="map"></div> 
<script> 
function initMap() { 
    //console.log("sdsfsd"); 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 14, 
     center: {lat: 28.6247, lng: 77.3731}, 
     disableDefaultUI:true, 
     //28.6247375!4d77.3731819 
    }); 

    var directionsService = new google.maps.DirectionsService; 
    var directionsDisplay = new google.maps.DirectionsRenderer({suppressInfoWindows: true, suppressMarkers: true 
    }); 


    var response = {"abcd": {"points": 
    [ 
     [28.5435,77.2051,"2016-07-17 08:02:18 - 28.543500 - 77.205100"], 
     [28.5313,77.249,"2016-07-17 12:32:38 - 28.531300 - 77.249000"], 
     [28.5279,77.2462,"2016-07-17 12:35:02 - 28.527900 - 77.246200"], 
     [28.5328,77.2391,"2016-07-17 12:36:42 - 28.532800 - 77.239100"], 
     [28.5407,77.24,"2016-07-17 12:38:23 - 28.540700 - 77.240000"], 
     [28.543,77.2139,"2016-07-17 12:42:36 - 28.543000 - 77.213900"], 
     [28.5429,77.2095,"2016-07-17 12:43:26 - 28.542900 - 77.209500"], 
     [28.5332,77.2071,"2016-07-17 12:48:30 - 28.533200 - 77.207100"], 
     [28.531,77.2113,"2016-07-17 12:52:43 - 28.531000 - 77.211300"], 
     [28.5315,77.2077,"2016-07-17 13:03:15 - 28.531500 - 77.207700"], 
     [28.5433,77.2117,"2016-07-17 13:08:27 - 28.543300 - 77.211700"], 
     [28.5412,77.2374,"2016-07-17 13:12:50 - 28.541200 - 77.237400"], 
     [28.5311,77.2482,"2016-07-17 17:49:02 - 28.531100 - 77.248200"] 
    ]}, 
    "ret-abcd": {"points":[ 
    [28.5294,77.2502,"2016-07-18 07:29:38 - 28.529400 - 77.250200"], 
    [28.5541,77.2637,"2016-07-18 07:43:59 - 28.554100 - 77.263700"], 
    [28.5635,77.2648,"2016-07-18 07:46:08 - 28.563500 - 77.264800"], 
    [28.5721,77.2579,"2016-07-18 07:48:07 - 28.572100 - 77.257900"], 
    [28.5746,77.2608,"2016-07-18 07:49:14 - 28.574600 - 77.260800"], 
    [28.5787,77.2813,"2016-07-18 07:51:16 - 28.578700 - 77.281300"], 
    [28.5731,77.3086,"2016-07-18 07:52:39 - 28.573100 - 77.308600"], 
    [28.5902,77.336,"2016-07-18 07:58:00 - 28.590200 - 77.336000"], 
    [28.6252,77.3735,"2016-07-18 08:49:47 - 28.625200 - 77.373500"] 
    ] 
    } 
    }; 

var timeout = 100; 
var m = 0; 
var cnt = 0; 
var markers = []; 
var combinedResults; 
var directionsResultsReturned = 0; 
var linecolors = ['red', 'blue', 'green', 'yellow']; 

for(key in response) { 
    if(response[key].points.length > 0) { 
      var blocks = []; 
      var k = 0; 
      for(var i=0;i<response[key].points.length;i++) { 
       if(i != 0 && i % 10 == 0) { 
        k++; 
       } 
       //console.log(k); 
       if(typeof blocks[k] == 'undefined') { 
        blocks[k] = []; 
       } 

       blocks[k].push(response[key].points[i]); 
      } 
      //var ds = []; 
      //var dd = []; 
      ds = new google.maps.DirectionsService; 
      dd = new google.maps.DirectionsRenderer({suppressInfoWindows: true, suppressMarkers: true}); 
      dd.setMap(map); 

      for(i=0;i<blocks.length;i++) { 

       /*ds[m] = new google.maps.DirectionsService; 
       dd[m] = new google.maps.DirectionsRenderer({suppressInfoWindows: true, suppressMarkers: true, polylineOptions: { 
        strokeColor: linecolors[i] 
       }}); 
       dd[m].setMap(map); 
       */ 

       waypts = []; 
       markers.push([blocks[i][0][0], blocks[i][0][1], blocks[i][0][2]]); 
       for(var j=1;j<blocks[i].length-1;j++) { 
        waypts.push({ 
         location: blocks[i][j][0]+','+blocks[i][j][1], 
         stopover: true 
        }); 
        //var myLatlng = new google.maps.LatLng(blocks[i][j][0],blocks[i][j][1]); 
        markers.push([blocks[i][j][0],blocks[i][j][1],blocks[i][j][2]]); 

       } 
       markers.push([blocks[i][blocks[i].length-1][0], blocks[i][blocks[i].length-1][1], blocks[i][blocks[i].length-1][2]]); 
       //data.start[0]+','+data.start[1], 
       //ds[m].route({ 

       dd.setOptions({suppressInfoWindows: true, suppressMarkers: true, polylineOptions: { 
        strokeColor: linecolors[cnt%3] 
       }}); 
       ds.route({ 
         'origin': blocks[i][0][0]+','+blocks[i][0][1], 
         'destination': blocks[i][blocks[i].length-1][0]+','+blocks[i][blocks[i].length-1][1], 
         'waypoints': waypts, 
         'travelMode': 'DRIVING' 
        }, 
        function (directions, status){ 
         //console.log(dd[m]); 
         if (status == google.maps.DirectionsStatus.OK) { 

          if (directionsResultsReturned == 0) { // first bunch of results in. new up the combinedResults object 
           combinedResults = directions; 
           directionsResultsReturned++; 
          } 
          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(directions.routes[0].legs); 
           combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(directions.routes[0].overview_path); 

           combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(directions.routes[0].bounds.getNorthEast()); 
           combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(directions.routes[0].bounds.getSouthWest()); 
           directionsResultsReturned++; 
          } 
          //dd[m].setOptions({suppressInfoWindows: true, suppressMarkers: true, polylineOptions: { 


          if (directionsResultsReturned == blocks.length) { // we've received all the results. put to map 
           //dd[m].setDirections(combinedResults); 
           dd.setDirections(combinedResults); 
          }  
          /*dd[m].setDirections(directions); 
          console.log(i); 
          console.log(linecolors[i%3]) 
          dd[m].setOptions({suppressInfoWindows: true, suppressMarkers: true, polylineOptions: { 
           strokeColor: linecolors[i%3] 
          }});*/ 
         } 
        } 
       ); 

      }  
    } 

    for(h=0;h<markers.length;h++) { 
     createMapMarker(map, new google.maps.LatLng(markers[h][0],markers[h][1]), markers[h][2], "", ""); 
    } 
    cnt++; 

} 
} 
function createMapMarker(map, latlng, label, html, sign) { 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     icon: "http://www.google.com/mapfiles/marker"+ sign +".png", 
     title: label, 
     //zIndex: Math.round(latlng.lat()*-100000)<<5 
    }); 

    marker.myname = label; 


    return marker; 
} 

</script> 

<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"> 
</script>

ключ набора данных идентификатор

UPDATE: Обновленный работает код, только Google API ключ нужно заменить

источник

2016-07-19 kuldeep.kamboj

+0

http://jsfiddle.net/upsidown/3uLqrd7c/ – MrUpsidown

+0

возможно дубликат [Как нарисовать Google Maps путевую с несколькими полилиниями] (http://stackoverflow.com/questions/35989237/how-to-draw-a-google-maps-waypoint-with-multi-polylines) – geocodezip

+0

@geocode zip, мне нужно следовать конкретному набору данных для цвета полилинии, поэтому любые наборы данных могут иметь много путевых точек, но только один конкретный цвет линии. –

ответ

3

Вам нужно создать DirectionsRenderer для каждого набора данных , Если в наборе данных содержится более 8 путевых точек, вам необходимо совместить результаты с DirectionsService.

proof of concept fiddle

фрагмент кода:

function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 14, 
 
    center: { 
 
     lat: 28.6247, 
 
     lng: 77.3731 
 
    }, 
 
    disableDefaultUI: true, 
 
    }); 
 

 
    var directionsService = new google.maps.DirectionsService; 
 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    suppressInfoWindows: true, 
 
    suppressMarkers: true 
 
    }); 
 

 
    var response = { 
 
    "abcd": { 
 
     "points": [ 
 
     [28.5435, 77.2051, "2016-07-17 08:02:18 - 28.543500 - 77.205100"], 
 
     [28.5313, 77.249, "2016-07-17 12:32:38 - 28.531300 - 77.249000"], 
 
     [28.5279, 77.2462, "2016-07-17 12:35:02 - 28.527900 - 77.246200"], 
 
     [28.5328, 77.2391, "2016-07-17 12:36:42 - 28.532800 - 77.239100"], 
 
     [28.5407, 77.24, "2016-07-17 12:38:23 - 28.540700 - 77.240000"], 
 
     [28.543, 77.2139, "2016-07-17 12:42:36 - 28.543000 - 77.213900"], 
 
     [28.5429, 77.2095, "2016-07-17 12:43:26 - 28.542900 - 77.209500"], 
 
     [28.5332, 77.2071, "2016-07-17 12:48:30 - 28.533200 - 77.207100"], 
 
     [28.531, 77.2113, "2016-07-17 12:52:43 - 28.531000 - 77.211300"], 
 
     [28.5315, 77.2077, "2016-07-17 13:03:15 - 28.531500 - 77.207700"], 
 
     [28.5433, 77.2117, "2016-07-17 13:08:27 - 28.543300 - 77.211700"], 
 
     [28.5412, 77.2374, "2016-07-17 13:12:50 - 28.541200 - 77.237400"], 
 
     [28.5311, 77.2482, "2016-07-17 17:49:02 - 28.531100 - 77.248200"] 
 
     ] 
 
    }, 
 
    "ret-abcd": { 
 
     "points": [ 
 
     [28.5294, 77.2502, "2016-07-18 07:29:38 - 28.529400 - 77.250200"], 
 
     [28.5541, 77.2637, "2016-07-18 07:43:59 - 28.554100 - 77.263700"], 
 
     [28.5635, 77.2648, "2016-07-18 07:46:08 - 28.563500 - 77.264800"], 
 
     [28.5721, 77.2579, "2016-07-18 07:48:07 - 28.572100 - 77.257900"], 
 
     [28.5746, 77.2608, "2016-07-18 07:49:14 - 28.574600 - 77.260800"], 
 
     [28.5787, 77.2813, "2016-07-18 07:51:16 - 28.578700 - 77.281300"], 
 
     [28.5731, 77.3086, "2016-07-18 07:52:39 - 28.573100 - 77.308600"], 
 
     [28.5902, 77.336, "2016-07-18 07:58:00 - 28.590200 - 77.336000"], 
 
     [28.6252, 77.3735, "2016-07-18 08:49:47 - 28.625200 - 77.373500"] 
 
     ] 
 
    } 
 
    }; 
 

 
    var timeout = 100; 
 
    var m = 0; 
 
    var cnt = 0; 
 
    var markers = []; 
 
    var combinedResults; 
 
    var directionsResultsReturned = 0; 
 
    var linecolors = ['red', 'blue', 'green', 'yellow']; 
 
    var colorIdx = 0; 
 
    var dd = []; 
 

 
    for (key in response) { 
 
    if (response[key].points.length > 0) { 
 
     var blocks = []; 
 
     var k = 0; 
 
     for (var i = 0; i < response[key].points.length; i++) { 
 
     if (i != 0 && i % 10 == 0) { 
 
      k++; 
 
     } 
 
     //console.log(k); 
 
     if (typeof blocks[k] == 'undefined') { 
 
      blocks[k] = []; 
 
     } 
 

 
     blocks[k].push(response[key].points[i]); 
 
     } 
 

 
     ds = new google.maps.DirectionsService; 
 

 
     for (i = 0; i < blocks.length; i++) { 
 

 
     waypts = []; 
 
     markers.push([blocks[i][0][0], blocks[i][0][1], blocks[i][0][2]]); 
 
     for (var j = 1; j < blocks[i].length - 1; j++) { 
 
      waypts.push({ 
 
      location: blocks[i][j][0] + ',' + blocks[i][j][1], 
 
      stopover: true 
 
      }); 
 
      //var myLatlng = new google.maps.LatLng(blocks[i][j][0],blocks[i][j][1]); 
 
      markers.push([blocks[i][j][0], blocks[i][j][1], blocks[i][j][2]]); 
 

 
     } 
 
     markers.push([blocks[i][blocks[i].length - 1][0], blocks[i][blocks[i].length - 1][1], blocks[i][blocks[i].length - 1][2]]); 
 
     //data.start[0]+','+data.start[1], 
 
     //ds[m].route({ 
 

 
     ds.route({ 
 
      'origin': blocks[i][0][0] + ',' + blocks[i][0][1], 
 
      'destination': blocks[i][blocks[i].length - 1][0] + ',' + blocks[i][blocks[i].length - 1][1], 
 
      'waypoints': waypts, 
 
      'travelMode': 'DRIVING' 
 
      }, 
 
      function(directions, status) { 
 
      dd.push(new google.maps.DirectionsRenderer({ 
 
       suppressInfoWindows: true, 
 
       suppressMarkers: true, 
 
       polylineOptions: { 
 
       strokeColor: linecolors[colorIdx++ % 3] 
 
       }, 
 
       map: map 
 
      })); 
 

 
      if (status == google.maps.DirectionsStatus.OK) { 
 
       dd[dd.length - 1].setDirections(directions); 
 
      } 
 
      } 
 
     ); 
 

 
     } 
 
    } 
 

 
    for (h = 0; h < markers.length; h++) { 
 
     createMapMarker(map, new google.maps.LatLng(markers[h][0], markers[h][1]), markers[h][2], "", ""); 
 
    } 
 
    cnt++; 
 

 
    } 
 
} 
 

 
function createMapMarker(map, latlng, label, html, sign) { 
 
    var marker = new google.maps.Marker({ 
 
    position: latlng, 
 
    map: map, 
 
    icon: "http://www.google.com/mapfiles/marker" + sign + ".png", 
 
    title: label, 
 
    }); 
 

 
    marker.myname = label; 
 

 

 
    return marker; 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);
html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 1px solid #000; 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

источник

2016-07-19 16:00:51 geocodezip

+0

спасибо, Решение, похоже, работает, я попробовал подобное решение раньше, но я использовал DirectionsRenderer внутри контрольного блока google.maps.DirectionsStatus.OK, который, возможно, заблокировал решение. –

+0

Если у них есть возможность цвета на основе ключа не на блоке (их два ключа, но три блока), я попробовал и проверил, но метод обратного вызова маршрута, который был вызван после завершения цикла, поэтому я получаю только последний ключ каждый раз. –

 Смежные вопросы

  • Нет связанных вопросов^_^