X marks along the direction_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-07 19:24 出处：网络

I have never worked with Google maps API. For the school project I am working on; I need to get a direction between two locations (this is easy part and I think I can do this),

I have never worked with Google maps API.

For the school project I am working on; I need to get a direction between two locations (this is easy part and I think I can do this),

However I 开发者_如何转开发also need to put an X mark; at every 10 miles along the way.

Is this even possible?

Thank You.

Ok, here's a working solution that draws markers every 200 miles (I was working on big distances to check it worked on geodesic curved lines, which it does). To make this work for you, just change all the coordinates, and change 200 to 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>