沿方向的 X 标记答案

【问题标题】：X marks along the direction沿方向的 X 标记
【发布时间】：2011-09-23 21:34:11
【问题描述】：

我从未使用过 Google 地图 API。

对于我正在从事的学校项目；我需要在两个位置之间确定方向（这很简单，我想我可以做到），

但是我还需要打一个 X 标记；沿途每10英里。

这可能吗？

谢谢。

【问题讨论】：

您是打算使用 DirectionsService 绘制实际方向，还是只在地图上的两点之间画一条折线？
嗨，Duncan，我真的很确定...我可以使用任何一种，让我每 50 英里打个 X 标记...那会是哪一种？
如果您只是使用折线在两点之间绘制一条直线会更容易。我认为它也可以通过方向来完成，只是不确定如何。

标签： google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

好的，这是一个可行的解决方案，它每 200 英里绘制一次标记（我正在研究大距离以检查它是否适用于测地线曲线，确实如此）。为了让这个工作适合你，只需更改所有坐标，然后将 200 更改为 10

<!DOCTYPE html>
<html>
<head>
<title>lines with markers every x miles</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<!--- need to load the geometry library for calculating distances, see http://www.svennerberg.com/2011/04/calculating-distances-and-areas-in-google-maps-api-3/ --->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>

<script type="text/javascript"> 
    function initialize() {
        var startLatlng = new google.maps.LatLng(54.42838,-2.9623);
        var endLatLng = new google.maps.LatLng(52.908902,49.716793);

        var myOptions = {
            zoom: 4,
            center: new google.maps.LatLng(51.399206,18.457031),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var startMarker = new google.maps.Marker({
            position: startLatlng, 
            map: map
        });

        var endMarker = new google.maps.Marker({
            position: endLatLng, 
            map: map
        });

        // draw a line between the points
        var line = new google.maps.Polyline({
            path: [startLatlng, endLatLng],
            strokeColor: "##FF0000",
            strokeOpacity: 0.5,
            strokeWeight: 4,
            geodesic: true,
            map: map
        });

        // what's the distance between these two markers?
        var distance = google.maps.geometry.spherical.computeDistanceBetween(
            startLatlng, 
            endLatLng
        );

        // 200 miles in meters
        var markerDistance = 200 * 1609.344;

        var drawMarkers = true;

        var newLatLng = startLatlng;

        // stop as soon as we've gone beyond the end point 
        while (drawMarkers == true) {
            // what's the 'heading' between them?
            var heading = google.maps.geometry.spherical.computeHeading(
                newLatLng, 
                endLatLng
            );

            // get the latlng X miles from the starting point along this heading
             var newLatLng = google.maps.geometry.spherical.computeOffset(
                newLatLng,
                markerDistance, 
                heading
            );

            // draw a marker
            var newMarker = new google.maps.Marker({
                position: newLatLng, 
                map: map
            });

            // calculate the distance between our new marker and the end marker
            var newDistance = google.maps.geometry.spherical.computeDistanceBetween(
                newLatLng, 
                endLatLng
            );

            if (newDistance <= markerDistance) {
                drawMarkers = false;
            }
        }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <div id="map_canvas"></div>
</body>
</html>

【讨论】：

该死的，太棒了。我一定会的。非常感谢