如何在特定的给定距离米google map api v3中放置标记？答案

【问题标题】：How to place markers in specific given distance meters google map api v3?如何在特定的给定距离米google map api v3中放置标记？
【发布时间】：2017-07-22 07:49:34
【问题描述】：

在这里我添加了我的代码。在这段代码中，我想在折线路径上放置特定距离的标记，可以是英里或距离。距离不相等。请找到下面的代码。

 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);
}

【问题讨论】：

以上代码有什么问题？
@MayankPandeyz 我无法在给定距离的路线上放置自定义标记
GetPointAtDistance 需要一个距离，您正在传递一个数组（我认为您会在 javascript 控制台中得到一个错误）。请提供一个 minimal reproducible example 来证明您的问题。

标签： javascript jquery html google-maps-api-3

【解决方案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

代码 sn-p：

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>

【讨论】：