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. 您可以使用directions service 获取从 google.maps.LatLng（标记的位置）到地址（<li> 标记的文本）的路线。

2. 使用 JQuery 获取 <li> 的文本并将其传递给 directions service（您需要为无序列表提供一个 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);

working fiddle