Google Maps API v3 – Начертайте маршрут от маркера при щракване върху връзката

В момента имам проста Google Map, използваща 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="/bg#">Leeds</a></li>
    <li><a href="/bg#">York</a></li>
    <li><a href="/bg#">Wakefield</a></li>
    <li><a href="/bg#">Harrogate</a></li>
</ul>

Когато потребителят щракне върху връзка към град, бих искал Google Map да начертае маршрута за шофиране от моя маркер до града и да намали мащаба, за да пасне на маршрута.

Когато след това потребителят щракне върху друг град, трябва да се начертае нов маршрут за шофиране от моя маркер до града, върху който е щракнато.

Вече използвам 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="/bg#">Leeds</a></li>
    <li><a href="/bg#">York</a></li>
    <li><a href="/bg#">Wakefield</a></li>
    <li><a href="/bg#">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