2

我目前有一个简单的谷歌地图，使用 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>

当用户点击城市链接时，我希望谷歌地图绘制从我的标记到城市的行车路线并缩小以适应路线。

当用户随后点击不同的城市时，应该从我的标记到点击的城市绘制一条新的驾驶路线。

我已经在页面上使用了 jQuery，所以也许它可以用于这个？

我不知道从哪里开始，我害怕！任何帮助或建议将不胜感激。

非常感谢。

4

1 回答 1

6
  1. 您可以使用路线服务获取从 google.maps.LatLng（标记的位置）到地址（标记的文本）的路线<li>。

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

工作小提琴

于 2014-08-20T01:03:22.967 回答