将标记放置在具有特定距离的多段线上 [英] place marker on polyline with specific distance

问题描述

我使用google map api v3制作了谷歌地图，并在地图上放置了一条折线，这里是我的地图代码

I have made a google map using google map api v3 and placed a polyline on map here is my code for my map

function initialize() {
            var myLatLng = new google.maps.LatLng(31.77577, 72.26588);
            var mapOptions = {
                zoom: 15,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.HYBRID
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var flightPlanCoordinates = [
      new google.maps.LatLng(31.77577, 72.26588),
      new google.maps.LatLng(31.75715, 72.25918),
      new google.maps.LatLng(31.7379, 72.2415),
      new google.maps.LatLng(31.717362, 72.226646),
      new google.maps.LatLng(31.720063, 72.216905),
      new google.maps.LatLng(31.714514, 72.206905),
      new google.maps.LatLng(31.7086, 72.186735),
      new google.maps.LatLng(31.702685, 72.177294)

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

            flightPath.setMap(map);
        }

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

现在我想在每1公里的这条折线上放置标记。请任何人帮助放置标记在1公里的折线上。

Now i want to Place marker on this polyline on each 1 km.Please any one help to place marker on 1km on polyline.

推荐答案

这适用于我（添加到您的初始化函数的末尾）： b
$ b

This works for me (added to the end of your initialize function):

var i=1;
var length = google.maps.geometry.spherical.computeLength(flightPath.getPath());
var remainingDist = length;

while (remainingDist > 0)
{
   createMarker(map, flightPath.GetPointAtDistance(1000*i),i+" km");
   remainingDist -= 1000;
   i++;
}
// put markers at the ends
createMarker(map,flightPath.getPath().getAt(0),length/1000+" km");
createMarker(map,flightPath.getPath().getAt(flightPath.getPath().getLength()-1),(length/1000).toFixed(2)+" km");
flightPath.setMap(map);
}

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

示例

这篇关于将标记放置在具有特定距离的多段线上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！