Google Maps API v3 — построение маршрута от маркера при нажатии на ссылку

В настоящее время у меня есть простая карта Google, использующая API v3, с пользовательским маркером (файл PNG), отображаемым на веб-странице:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
function initialize() {
    var myLatlng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
    var markerLatLng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
    var image = new google.maps.MarkerImage('/img/location/marker.png',
    // This marker is 125 pixels wide by 109 pixels tall.
    new google.maps.Size(125, 109),
    // The origin for this image is 0,0 (left,top).
    new google.maps.Point(0,0),
    // The anchor for this image is towards the bottom left of the image (left,top).
    new google.maps.Point(4, 105));

    var CustomMarker = new google.maps.Marker({
        position: markerLatLng,
        map: map,
        icon: image,
        animation: google.maps.Animation.DROP
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Что я хотел бы сделать, так это добавить список городов (не в теге формы <select>) под картой:

<ul>
    <li><a href="#">Leeds</a></li>
    <li><a href="#">York</a></li>
    <li><a href="#">Wakefield</a></li>
    <li><a href="#">Harrogate</a></li>
</ul>

Когда пользователь нажимает на ссылку города, я бы хотел, чтобы карта Google прокладывала маршрут движения от моего маркера до города и уменьшала масштаб, чтобы соответствовать маршруту.

Когда после этого пользователь нажимает на другой город, должен быть проложен новый маршрут движения от моего маркера до города, на который он нажал.

Я уже использую jQuery на странице, так что, возможно, его можно использовать для этого?

Я понятия не имею, с чего начать, я боюсь! Любая помощь или совет будут очень признательны.

Большое спасибо.


google-maps javascript google-maps-api-3 directions driving-directions
person benspencer    schedule 19.08.2014    source источник

Ответы (1)


arrow_upward
6
arrow_downward

  1. Чтобы проложить маршрут из google.maps.LatLng ( положение вашего маркера) на адрес (текст ваших <li> тегов.

  2. используйте JQuery, чтобы получить текст <li> и передать его в службу маршрутов (для этого вам нужно указать идентификатор ненумерованного списка)

    $("#citylist").on("click", "li", function () {
  getDirections($(this).text());
});

HTML:

<ul id="citylist">
    <li><a href="#">Leeds</a></li>
    <li><a href="#">York</a></li>
    <li><a href="#">Wakefield</a></li>
    <li><a href="#">Harrogate</a></li>
</ul>
<div id="map_canvas"></div>

код:

var map = null;
var CustomMarker = null;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

function initialize() {
    $("#citylist").on("click", "li", function () {
    getDirections($(this).text());
    });
    var myLatlng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
    var markerLatLng = new google.maps.LatLng(51.49757618329838, 0.23350238800048828);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    CustomMarker = new google.maps.Marker({
        position: markerLatLng,
        map: map,
        icon: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        animation: google.maps.Animation.DROP
    });
    directionsDisplay.setMap(map);
}



function getDirections(destination) {
    var start = CustomMarker.getPosition();
    var dest = destination;
    var request = {
        origin: start,
        destination: dest,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

рабочая скрипта

person geocodezip    schedule 20.08.2014
comment
Это абсолютно идеально. Как раз то, что я пытался сделать, большое спасибо! Не могли бы вы проголосовать за мой вопрос? По какой-то причине за него проголосовали против - думал, что это довольно хорошо сформулированный вопрос. - person benspencer; 20.08.2014