X marks along the direction

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.

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

1条回答

男人必须洒脱

2楼-- · 2019-03-05 13:38

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>

0人赞添加讨论(0) 举报

X marks along the direction

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间