Google Maps API v3 - 在链接点击时从标记绘制路线

Question

我目前有一个简单的谷歌地图,使用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,所以也许它可以用于此？

我不知道从哪里开始我害怕!任何帮助或建议将非常感谢.

非常感谢.

Answer 1

1. 您可以使用路线服务从google.maps.LatLng(标记的位置)获取路线到地址(<li>代码的文字).

2. 使用JQuery获取文本<li>并将其传递到路线服务(您需要给无序列表一个id来执行此操作)

   $("#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);

工作小提琴