X отмечает направление

Я никогда не работал с API карт Google.

Для школьного проекта, над которым я работаю; Мне нужно получить направление между двумя точками (это простая часть, и я думаю, что смогу это сделать),

Однако мне также нужно поставить отметку X; через каждые 10 км пути.

Это вообще возможно?

Благодарю вас.


google-maps google-maps-api-3 google-maps-markers
person socialMatrix    schedule 23.09.2011    source источник
comment
Собираетесь ли вы использовать DirectionsService для построения фактических направлений или просто рисуете ломаную линию между двумя точками на карте?   -  person duncan    schedule 24.09.2011
comment
Привет, Дункан, я не совсем уверен... Я могу использовать любой из них, который позволит мне ставить отметку x через каждые 50 миль... Какой из них будет?   -  person socialMatrix    schedule 25.09.2011
comment
Было бы проще, если бы вы использовали полилинию для рисования одной прямой линии между двумя точками. Я думаю, что это можно было бы сделать и с Directions, просто не знаю, как.   -  person duncan    schedule 25.09.2011

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, вот рабочее решение, которое отрисовывает маркеры каждые 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>
person duncan    schedule 24.09.2011
comment
Черт, это потрясающе. Я обязательно буду. Большое спасибо - person socialMatrix; 29.09.2011