Google Maps Api - рисование маршрутов из массива точек

Question

Я хотел бы подключить 8 точек на карте Google, чтобы они разделили линию (дорогу). Я бы хотел щелкнуть по облако точек с описанием этого момента. Цель состоит в том, чтобы показать маршрут, на котором указывает точка автомобиля.

У меня есть сценарий для создания карты с точками, но я не знаю, как соединить маркеры.

var MapPoints = '[{"address":{"address":"plac Grzybowski, Warszawa, Polska","lat":"52.2360592","lng":"21.002903599999968"},"title":"Warszawa"},{"address":{"address":"Jana Paw\u0142a II, Warszawa, Polska","lat":"52.2179967","lng":"21.222655600000053"},"title":"Wroc\u0142aw"},{"address":{"address":"Wawelska, Warszawa, Polska","lat":"52.2166692","lng":"20.993677599999955"},"title":"O\u015bwi\u0119cim"}]'; 

var MY_MAPTYPE_ID = 'custom_style'; 
function initialize() { 

if (jQuery('#map').length > 0) { 

    var locations = jQuery.parseJSON(MapPoints); 

    window.map = new google.maps.Map(document.getElementById('map'), { 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     scrollwheel: false 
    }); 

    var infowindow = new google.maps.InfoWindow(); 
    var bounds = new google.maps.LatLngBounds(); 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i].address.lat, locations[i].address.lng), 
      map: map 
     }); 

     bounds.extend(marker.position); 

     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(locations[i]['title']); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 

    map.fitBounds(bounds); 

    var flightPlanCoordinates = [ 
     new google.maps.LatLng(37.772323, -122.214897), 
     new google.maps.LatLng(21.291982, -157.821856), 
     new google.maps.LatLng(-18.142599, 178.431), 
     new google.maps.LatLng(-27.46758, 153.027892) 
    ]; 
    var flightPath = new google.maps.Polyline({ 
     path: flightPlanCoordinates, 
     strokeColor: "#FF0000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    var flightPath = responseArray.map(function (item) { 
     return new google.maps.LatLng(item.latitude, item.longitude); 
    }); 

    var listener = google.maps.event.addListener(map, "idle", function() { 
     map.setZoom(12); 
     google.maps.event.removeListener(listener); 
    }); 
} 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

• для подключения маркеров с google.maps.Polyline (как это выглядит, как вы пытаетесь сделать).

  1. создать пустой массив: var flightPlanCoordinates = [];

  2. толчок координаты их маркеров (объекты google.maps.LatLng) в массив координат, которая используется для полилинии: flightPlanCoordinates.push(marker.getPosition());

  3. множества опция map для полилинии: map:map (в объекте PolylineOptions).

     var flightPath = new google.maps.Polyline({ 
         map: map, 
         path: flightPlanCoordinates, 
         strokeColor: "#FF0000", 
         strokeOpacity: 1.0, 
         strokeWeight: 2 
     }); 
     

working fiddle

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

var MapPoints = '[{"address":{"address":"plac Grzybowski, Warszawa, Polska","lat":"52.2360592","lng":"21.002903599999968"},"title":"Warszawa"},{"address":{"address":"Jana Paw\u0142a II, Warszawa, Polska","lat":"52.2179967","lng":"21.222655600000053"},"title":"Wroc\u0142aw"},{"address":{"address":"Wawelska, Warszawa, Polska","lat":"52.2166692","lng":"20.993677599999955"},"title":"O\u015bwi\u0119cim"}]'; 
 

 
var MY_MAPTYPE_ID = 'custom_style'; 
 

 
function initialize() { 
 

 
    if (jQuery('#map').length > 0) { 
 

 
    var locations = jQuery.parseJSON(MapPoints); 
 

 
    window.map = new google.maps.Map(document.getElementById('map'), { 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     scrollwheel: false 
 
    }); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 
    var flightPlanCoordinates = []; 
 
    var bounds = new google.maps.LatLngBounds(); 
 

 
    for (i = 0; i < locations.length; i++) { 
 
     marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i].address.lat, locations[i].address.lng), 
 
     map: map 
 
     }); 
 
     flightPlanCoordinates.push(marker.getPosition()); 
 
     bounds.extend(marker.position); 
 

 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
      infowindow.setContent(locations[i]['title']); 
 
      infowindow.open(map, marker); 
 
     } 
 
     })(marker, i)); 
 
    } 
 

 
    map.fitBounds(bounds); 
 

 
    var flightPath = new google.maps.Polyline({ 
 
     map: map, 
 
     path: flightPlanCoordinates, 
 
     strokeColor: "#FF0000", 
 
     strokeOpacity: 1.0, 
 
     strokeWeight: 2 
 
    }); 
 

 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div id="map" style="border: 2px solid #3872ac;"></div>

• соединить точки, используя службу направления (от the example you reference)

  1. создать пустой массив: var flightPlanCoordinates = [];

  2. толчок координаты их маркеры (Яндекс.Картах.LatLng объектов) в массив координат, которая используется для полилинии: flightPlanCoordinates.push(marker.getPosition());

  3. использования, что массив для заполнения start, end и waypts аргументов в функцию calcRoute:

     var start = flightPlanCoordinates[0]; 
     var end = flightPlanCoordinates[flightPlanCoordinates.length - 1]; 
     var waypts = []; 
     for (var i = 1; i < flightPlanCoordinates.length - 1; i++) { 
         waypts.push({ 
          location: flightPlanCoordinates[i], 
          stopover: true 
         }); 
     } 
     calcRoute(start, end, waypts); 
     

  4. изменить функцию calcRoute использовать эти аргументы:

     function calcRoute(start, end, waypts) { 
         var request = { 
         origin: start, 
         destination: end, 
         waypoints: waypts, 
         optimizeWaypoints: true, 
         travelMode: google.maps.TravelMode.DRIVING 
     }; 
     

working fiddle

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

var MapPoints = '[{"address":{"address":"plac Grzybowski, Warszawa, Polska","lat":"52.2360592","lng":"21.002903599999968"},"title":"Warszawa"},{"address":{"address":"Jana Paw\u0142a II, Warszawa, Polska","lat":"52.2179967","lng":"21.222655600000053"},"title":"Wroc\u0142aw"},{"address":{"address":"Wawelska, Warszawa, Polska","lat":"52.2166692","lng":"20.993677599999955"},"title":"O\u015bwi\u0119cim"}]'; 
 

 
var MY_MAPTYPE_ID = 'custom_style'; 
 
var directionsDisplay; 
 
var directionsService = new google.maps.DirectionsService(); 
 
var map; 
 

 
function initialize() { 
 
    directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    suppressMarkers: true 
 
    }); 
 

 
    if (jQuery('#map').length > 0) { 
 

 
    var locations = jQuery.parseJSON(MapPoints); 
 

 
    map = new google.maps.Map(document.getElementById('map'), { 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     scrollwheel: false 
 
    }); 
 
    directionsDisplay.setMap(map); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 
    var flightPlanCoordinates = []; 
 
    var bounds = new google.maps.LatLngBounds(); 
 

 
    for (i = 0; i < locations.length; i++) { 
 
     marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i].address.lat, locations[i].address.lng), 
 
     map: map 
 
     }); 
 
     flightPlanCoordinates.push(marker.getPosition()); 
 
     bounds.extend(marker.position); 
 

 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
      infowindow.setContent(locations[i]['title']); 
 
      infowindow.open(map, marker); 
 
     } 
 
     })(marker, i)); 
 
    } 
 

 
    map.fitBounds(bounds); 
 

 
    // directions service configuration 
 
    var start = flightPlanCoordinates[0]; 
 
    var end = flightPlanCoordinates[flightPlanCoordinates.length - 1]; 
 
    var waypts = []; 
 
    for (var i = 1; i < flightPlanCoordinates.length - 1; i++) { 
 
     waypts.push({ 
 
     location: flightPlanCoordinates[i], 
 
     stopover: true 
 
     }); 
 
    } 
 
    calcRoute(start, end, waypts); 
 
    } 
 
} 
 

 
function calcRoute(start, end, waypts) { 
 
    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); 
 
     var route = response.routes[0]; 
 
     var summaryPanel = document.getElementById('directions_panel'); 
 
     summaryPanel.innerHTML = ''; 
 
     // For each route, display summary information. 
 
     for (var i = 0; i < route.legs.length; i++) { 
 
     var routeSegment = i + 1; 
 
     summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>'; 
 
     summaryPanel.innerHTML += route.legs[i].start_address + ' to '; 
 
     summaryPanel.innerHTML += route.legs[i].end_address + '<br>'; 
 
     summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>'; 
 
     } 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div id="map" style="border: 2px solid #3872ac;"></div> 
 
<div id="directions_panel"></div>