这里我添加了我的代码。在此代码中,我想在特定距离的折线路径上放置标记,可以是英里或距离。距离不相等。请在下面找到代码。
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);
}
答案 0 :(得分:0)
您的代码中存在拼写错误。
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]));
}
代码段
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>