单击目的地后创建从起点到目的地地图标记的路线（行驶）

Question

单击目的地标记后，我尝试在源标记（蓝色标记）和目的地之间创建一条路线（驾驶）

这是我的 javascripts

function initMap() {
    //read the parameter values you want to send to server
    var searchItem = $("#SearchItem").val();
    var jobs = $("#Jobs").val();
    var subid = $("#bluee").val();

    var map = new google.maps.Map(document.getElementById('dvMap'),
        {
            zoom: 8
        });

 var url = "@Url.Action("AsMapAjax", "My")";


    navigator.geolocation.getCurrentPosition(function (p) {
        var latlngg = new google.maps.LatLng(p.coords.latitude, 
          p.coords.longitude);

        var mapOptions = {
            center: latlngg,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        //You are Here

        var iconoMarca = "../../images/bnm.png";
        mymarker = new google.maps.Marker({
            animation: google.maps.Animation.DROP,
            map: map,
            icon: iconoMarca,
            position: latlngg,
            optimized: false,
            title:"شما اینجا هستید"

        });

        var numberMarkerImg = {
            url: '../../images/webresize2.png',

            labelOrigin: new google.maps.Point(30, -6)
        };


        $.post(url, { SearchItem: searchItem, jobid: jobs, subid: subid }, 
    function (res) {
            if (res.success) {
                var latLng;
                $.each(res.responseText, function (i, item) {
                    latLng = new google.maps.LatLng(item.Lat, item.Lng);
                    var marker = new google.maps.Marker({
                        position: latLng,
                        map: map,
                        icon: numberMarkerImg,

                        label: {
                            text: item.Title,
                            color: 'Black',
                            fontFamily: 'IranSans',
                            fontSize: '17'
                        },

                        animation: google.maps.Animation.DROP
                    });

                   var wdLink = '@Url.Action("Poster", "My")?id=' + item.Title.split(" ").join("-") + '__' + item.Id;

                    var contentString = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<div  id="firstHeading">' + item.Title + '</div>' +
'<div id="bodyContent">' +
'<p><b>' + item.Preamble + '</b></p>' +
'<p><h4> <a href="'+ wdLink+'">' +
'اطلاعات بیشتر</a></h4> ' +
'</p>' +
'</div>' +
'</div>';

               var infowindow = new google.maps.InfoWindow({
                        content: contentString
                    });
                    marker.addListener('click', function () {
                        infowindow.open(map, marker);

                    });

                     (marker, item);
                    ///////////////////
                    $(document).ready(function () {
                        $(window).resize(function () {
                            google.maps.event.trigger(map, 'resize');
                        });
                        google.maps.event.trigger(map, 'resize');
                    });


                });
                map.setCenter(latlngg);
            }
        });
    });
}

很遗憾，经过努力，我无法解决这个问题。你能帮帮我吗。 我做过一次，但是使用折线，我现在在点击目的地后寻找从起点到目的地的街道路径

Answer 1

查看this JSBin，了解如何实现您正在寻找的功能的简单示例。

以下函数获取路由并渲染：

function markerClicked(destinationLocation) {
  var directionsRequest = {
    origin: sourceLocation,
    destination: destinationLocation,
    travelMode: 'DRIVING'
  };

  directionsService.route(directionsRequest, handleDirectionResults);
}

function handleDirectionResults(result, status) {
  if (status === 'OK') {
    directionsDisplay.setDirections(result);
  } else {
    console.log(status);
  }
}

单击标记时，将调用markerClicked 函数并将标记的位置作为参数传递给它。 markerClicked 发出路线搜索请求，然后使用请求结果调用 handleDirectionResults。 handleDirectionResults 通过在directionsDisplay 对象上调用setDirections 方法来呈现路线（将路线请求的结果传递给setDirections）。