Question

我从未使用过Google地图API。

我正在研究的学校项目;我需要在两个位置之间找到方向（这很容易，我认为我可以做到这一点），

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

这甚至可能吗？

谢谢。

Answer 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>

X沿着方向标记

1 个答案: