特定の距離計のGoogleマップapi v3にマーカーを配置するにはどうすればよいですか？

Question

ここに私のコードを追加しました。このコードでは、ポリラインパス上のマーカーを特定の距離（マイルまたは距離）で配置したいと考えています。距離は等しくない。以下のコードを見つけてください。

var distances = [3000, 5000, 7000, 8000]; 
    for (var i = 1; i < distances.length; i += 1) { 
     createMarker(map, GetPointAtDistance(distances)); 
    } 

function createMarker(map, latlng) { 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     icon: iconUrl, 
    }); 
    markersArray.push(marker) 
} 

function GetPointAtDistance(metres) { 
    if (metres === 0) return flightPath.getPath().getAt(0); 
    if (metres < 0) return null; 
    if (flightPath.getPath().getLength() < 2) return null; 
    var dist = 0; 
    var olddist = 0; 
    var i = 1; 
    for (i = 1; i < flightPath.getPath().getLength() && dist < metres; i += 1) { 
     olddist = dist; 
     dist += google.maps.geometry.spherical.computeDistanceBetween(
     flightPath.getPath().getAt(i), 
     flightPath.getPath().getAt(i - 1) 
    ); 
    } 
    if (dist < metres) { 
     return null; 
    } 
    var p1 = flightPath.getPath().getAt(i - 2); 
    var p2 = flightPath.getPath().getAt(i - 1); 
    var m = (metres - olddist)/(dist - olddist); 
    return new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m); 
} 

Answer 1

コードに入力ミスがあります。

for (var i = 1; i < distances.length; i += 1) { 
    createMarker(map, GetPointAtDistance(distances)); 
} 

なければならない

for (var i=0; i < distances.length; i++) { 
    createMarker(map, GetPointAtDistance(distances[i])); 
} 

proof of concept fiddle

コードスニペット：

var geocoder; 
 
var map; 
 
var flightPath; 
 
var markersArray = []; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    // New York, NY, USA (40.7127837, -74.00594130000002) 
 
    // Newark, NJ, USA (40.735657, -74.1723667) 
 
    flightPath = new google.maps.Polyline({ 
 
     map: map, 
 
     path: [{lat: 40.7127837, lng: -74.0059413}, {lat: 40.735657, lng: -74.1723667}] 
 
    }); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    for (var i=0; i<flightPath.getPath().getLength(); i++) { 
 
     bounds.extend(flightPath.getPath().getAt(i)); 
 
    } 
 
    map.fitBounds(bounds); 
 
    var distances = [3000, 5000, 7000, 8000]; 
 
    for (var i = 0; i < distances.length; i++) { 
 
    createMarker(map, GetPointAtDistance(distances[i])); 
 
    } 
 
} 
 

 
function createMarker(map, latlng) { 
 
    var marker = new google.maps.Marker({ 
 
    position: latlng, 
 
    map: map 
 
    }); 
 
    markersArray.push(marker) 
 
} 
 

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

 

 
function GetPointAtDistance(metres) { 
 
    if (metres === 0) return flightPath.getPath().getAt(0); 
 
    if (metres < 0) return null; 
 
    if (flightPath.getPath().getLength() < 2) return null; 
 
    var dist = 0; 
 
    var olddist = 0; 
 
    var i = 1; 
 
    for (i = 1; i < flightPath.getPath().getLength() && dist < metres; i += 1) { 
 
    olddist = dist; 
 
    dist += google.maps.geometry.spherical.computeDistanceBetween(
 
     flightPath.getPath().getAt(i), 
 
     flightPath.getPath().getAt(i - 1) 
 
    ); 
 
    } 
 
    if (dist < metres) { 
 
    return null; 
 
    } 
 
    var p1 = flightPath.getPath().getAt(i - 2); 
 
    var p2 = flightPath.getPath().getAt(i - 1); 
 
    var m = (metres - olddist)/(dist - olddist); 
 
    return new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m); 
 
}

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="map_canvas"></div>