沿路線添加標記

Question

我試圖從谷歌地圖方向沿路線創建幾個標記。我已經將航路點作爲一個選項進行了研究，但基於我對它的文檔的理解，它創建了從A點到B點的路線，並通過了您設置的路點以便從A點到B點。不希望我的路線根據預定的航點進行計算。我需要一個預定的起點和終點，並根據地圖上的距離計算我的航點。例如，在路線上每隔幾英里創建一個標記。航點是否會這樣做？如果是這樣，任何已經完成的地方的例子？

有什麼建議嗎？

Answer 1

爲例安德魯告訴航點也不會做。

您不必爲路由（如eaxmple）的預定點，所以你可以做的是：

一個方向包括通過爲route-> overview_path定義的點，是什麼定義了折線路線。

因此，您可以走這條路，使用google.maps.geometry.spherical.computeDistanceBetween()計算兩個路徑點之間的距離，並在達到所需距離時創建標記。

這是建議的實現：http://jsfiddle.net/doktormolle/eNzFb/

---

<edit>

請注意：這個答案已經過時了。您最好使用內置的IconSequence。

Answer 2

編號航點確定路線的路徑，如您所找到的。無論哪條路徑被確定，您都希望在路線上放置「航點」。

這是可能的，拉里在http://www.geocodezip.com/v3_polyline_example_kmmarkers.html

Answer 3

實施例那放置標記沿路線每1英里方向服務返回：

http://www.geocodezip.com/v3_kmMarkersFromDirections.html

代碼片斷：

var directionDisplay; 
 
var directionsService = new google.maps.DirectionsService(); 
 
var map; 
 
var polyline = null; 
 
var gmarkers = []; 
 
var infowindow = new google.maps.InfoWindow(); 
 

 
function initMap() { 
 
    var directionsService = new google.maps.DirectionsService; 
 
    var directionsDisplay = new google.maps.DirectionsRenderer; 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 7, 
 
    center: { 
 
     lat: 41.85, 
 
     lng: -87.65 
 
    } 
 
    }); 
 
    polyline = new google.maps.Polyline({ 
 
    path: [], 
 
    strokeColor: '#FF0000', 
 
    strokeWeight: 3 
 
    }); 
 

 

 
    directionsDisplay.setMap(map); 
 
    calculateAndDisplayRoute(directionsService, directionsDisplay); 
 
    var onChangeHandler = function() { 
 
    calculateAndDisplayRoute(directionsService, directionsDisplay); 
 
    }; 
 
    document.getElementById('btn').addEventListener('click', onChangeHandler); 
 
} 
 

 
function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
 
    directionsService.route({ 
 
    origin: document.getElementById('start').value, 
 
    destination: document.getElementById('end').value, 
 
    travelMode: 'DRIVING' 
 
    }, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     polyline.setPath([]); 
 
     var bounds = new google.maps.LatLngBounds(); 
 
     startLocation = new Object(); 
 
     endLocation = new Object(); 
 
     directionsDisplay.setDirections(response); 
 
     var route = response.routes[0]; 
 
     // For each route, display summary information. 
 
     var path = response.routes[0].overview_path; 
 
     var legs = response.routes[0].legs; 
 
     for (i = 0; i < legs.length; i++) { 
 
     if (i == 0) { 
 
      startLocation.latlng = legs[i].start_location; 
 
      startLocation.address = legs[i].start_address; 
 
      // marker = google.maps.Marker({map:map,position: startLocation.latlng}); 
 
      marker = createMarker(legs[i].start_location, "start", legs[i].start_address, "green"); 
 
     } 
 
     endLocation.latlng = legs[i].end_location; 
 
     endLocation.address = legs[i].end_address; 
 
     var steps = legs[i].steps; 
 
     for (j = 0; j < steps.length; j++) { 
 
      var nextSegment = steps[j].path; 
 
      for (k = 0; k < nextSegment.length; k++) { 
 
      polyline.getPath().push(nextSegment[k]); 
 
      bounds.extend(nextSegment[k]); 
 
      } 
 
     } 
 
     } 
 

 
     polyline.setMap(map); 
 
     for (var i = 0; i < gmarkers.length; i++) { 
 
     gmarkers[i].setMap(null); 
 
     } 
 
     gmarkers = []; 
 
     var points = polyline.GetPointsAtDistance(1000); 
 
     for (var i = 0; i < points.length; i++) { 
 
     var marker = new google.maps.Marker({ 
 
      map: map, 
 
      position: points[i], 
 
      title: i + 1 + " mile" 
 
     }); 
 
     marker.addListener('click', openInfoWindow); 
 
     } 
 

 
    } else { 
 
     alert("directions response " + status); 
 
    } 
 
    }); 
 

 

 
    /* function(response, status) { 
 
     if (status === 'OK') { 
 
     directionsDisplay.setDirections(response); 
 
     } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
     } 
 
    }); */ 
 
} 
 
google.maps.event.addDomListener(window, 'load', initMap); 
 

 
function createMarker(latlng, label, html, color) { 
 
    // alert("createMarker("+latlng+","+label+","+html+","+color+")"); 
 
    var contentString = '<b>' + label + '</b><br>' + html; 
 
    var marker = new google.maps.Marker({ 
 
    position: latlng, 
 
    // draggable: true, 
 
    map: map, 
 
    icon: getMarkerImage(color), 
 
    title: label, 
 
    zIndex: Math.round(latlng.lat() * -100000) << 5 
 
    }); 
 
    marker.myname = label; 
 
    gmarkers.push(marker); 
 

 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infowindow.setContent(contentString); 
 
    infowindow.open(map, marker); 
 
    }); 
 
    return marker; 
 
} 
 
var icons = new Array(); 
 
icons["red"] = { 
 
    url: "http://maps.google.com/mapfiles/ms/micons/red.png" 
 
}; 
 

 
function getMarkerImage(iconColor) { 
 
    if ((typeof(iconColor) == "undefined") || (iconColor == null)) { 
 
    iconColor = "red"; 
 
    } 
 
    if (!icons[iconColor]) { 
 
    icons[iconColor] = { 
 
     url: "http://maps.google.com/mapfiles/ms/micons/" + iconColor + ".png" 
 
    }; 
 
    } 
 
    return icons[iconColor]; 
 

 
} 
 

 
function openInfoWindow() { 
 
    var contentString = this.getTitle() + "<br>" + this.getPosition().toUrlValue(6); 
 
    infowindow.setContent(contentString); 
 
    infowindow.open(map, this); 
 
} 
 

 
// === A method which returns an array of GLatLngs of points a given interval along the path === 
 
google.maps.Polyline.prototype.GetPointsAtDistance = function(metres) { 
 
    var next = metres; 
 
    var points = []; 
 
    // some awkward special cases 
 
    if (metres <= 0) return points; 
 
    var dist = 0; 
 
    var olddist = 0; 
 
    for (var i = 1; 
 
    (i < this.getPath().getLength()); i++) { 
 
    olddist = dist; 
 
    dist += google.maps.geometry.spherical.computeDistanceBetween(this.getPath().getAt(i), this.getPath().getAt(i - 1)); 
 
    while (dist > next) { 
 
     var p1 = this.getPath().getAt(i - 1); 
 
     var p2 = this.getPath().getAt(i); 
 
     var m = (next - olddist)/(dist - olddist); 
 
     points.push(new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m)); 
 
     next += metres; 
 
    } 
 
    } 
 
    return points; 
 
}

/* Always set the map height explicitly to define the size of the div 
 
* element that contains the map. */ 
 

 
html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#floating-panel { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 25%; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
    text-align: center; 
 
    font-family: 'Roboto', 'sans-serif'; 
 
    line-height: 30px; 
 
    padding-left: 10px; 
 
}

<div id="floating-panel"> 
 
    <b>Start: </b> 
 
    <input id="start" value="New York, NY" /> 
 
    <b>End: </b> 
 
    <input id="end" value="Newark, NJ" /> 
 
    <input id="btn" value="Get Directions" type="button" /> 
 
</div> 
 
<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script>