单击目的地后创建从起点到目的地地图标记的路线线(驾驶)

亚历杭德罗1991

单击 Destination 标记后,我尝试在 Source 标记(蓝色标记)和 Destination 之间创建 routeLine(driving) 在此处输入图片说明

这是我的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);
            }
        });
    });
}

不幸的是,经过很多努力,我无法解决这个问题。你能帮我一下吗。我做过一次,但是使用 Polyline,我现在正在寻找从起点到终点的街道路径,然后单击目的地

雅弗

查看此 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通过调用对象setDirections方法来呈现路线directionsDisplay(将路线请求的结果传递给setDirections)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

运动:在处理中从起点到目的地画一条线

来自分类Dev

从起点(X,Y)到目的地(X,Y)画一条线

来自分类Dev

OpenCage Geocoder获取目的地和起点线标记

来自分类Dev

如何使用HERE MAP REST API获取从一个起点到多个目的地的距离(直接距离)

来自分类Dev

文件上传目的地

来自分类Dev

目的地是必填项

来自分类Dev

(.Copy)目的地:=空

来自分类Dev

(。复制)目的地:=空

来自分类Dev

Xamarin NSDragging目的地

来自分类Dev

Gtts 改变目的地

来自分类Dev

修改响应的目的地

来自分类Dev

设置目的地是错误的

来自分类Dev

Android:如何在地图上绘制从源到目的地的多条路线?

来自分类Dev

Android:如何在地图上绘制从源到目的地的多条路线?

来自分类Dev

在无目的地的Google地图上获得x公里后的纬度经度?

来自分类Dev

ActiveMQ-创建队列/目的地的最佳实践

来自分类Dev

Google 地图 - 隐藏目的地标记

来自分类Dev

无法更改符号链接的目的地

来自分类Dev

Appcode找不到目的地

来自分类Dev

印刷机目的地问题

来自分类Dev

不同目的地的数组排序算法

来自分类Dev

Outbond规则本身是哪个目的地?

来自分类Dev

有目的地开展活动

来自分类Dev

无法更改符号链接的目的地

来自分类Dev

在Rails中找到CSS目的地

来自分类Dev

更改复制任务目的地

来自分类Dev

Appcode找不到目的地

来自分类Dev

ssh无法到达目的地

来自分类Dev

Magento税率,基于发货目的地