路线导航修改

zengh

2021-05-27 e1c7f3fdbe56f22dbca6a0351317cb51fabace2f

 xcxjingqingmap/js/lxdhmap.js

@@ -10,7 +10,7 @@
      activeName: 'first',

      mh_query_show: true,
		

      ZBCXresult: null,

      move: null, //存放移动实例
@@ -46,7 +46,7 @@
         //     title: '第一个'
         // }];//url解码
         this.map = this.beginMap(this.map, this.getdata); //创建并接受map
         this.move = new myDomMove('#seedata', '.title', '#map');
         // this.move = new myDomMove('#seedata', '.title', '#map');
         // var dy = document.documentElement.clientHeight - 50;
         // $('#seedata').animate({ top: dy + "px" }, 10);
         // $('#map').css("height", (index, value) => {//改变地图高度
@@ -70,23 +70,23 @@
         var that = this,
            center = [data[0].wd, data[0].jd],
            url = `/api/blade-jfpts/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
         this.nowPosition = center;
         axios.post(url).then((res) => {
            // console.log(res)
            if (res.data.data.length != 0) {
               var dat = res.data.data[0];
               for (var key in dat) {
                  if (dat[key] == null || dat[key] == '') {
                     dat[key] = '暂无'
                  }
               }
               this.seedata = dat;
         // this.nowPosition = center;
         // axios.post(url).then((res) => {
         //    // console.log(res)
         //    if (res.data.data.length != 0) {
         //       var dat = res.data.data[0];
         //       for (var key in dat) {
         //          if (dat[key] == null || dat[key] == '') {
         //             dat[key] = '暂无'
         //          }
         //       }
         //       this.seedata = dat;

            } else {
               this.seedata = data[0];
            }
            // console.log(this.seedata, 1524545453)
         })
         //    } else {
         //       this.seedata = data[0];
         //    }
         //    // console.log(this.seedata, 1524545453)
         // })


         var createMap = () => {
@@ -131,8 +131,7 @@
         // console.log(data, 43545343)
         var setData = (a) => { //定义图标
            marker = L.marker([a.wd, a.jd], {
               icon: a.dtype == 0 ? carIcon : a.dtype == 1 ? planeIcon : a.dtype == 2 ?
                  busIcon : '',
               icon: planeIcon,
               // title: title,
               myData: { //自定义数据
                  ...a
@@ -149,12 +148,17 @@
            // } else if (a.dtype == 2) {
            //    setData(a);
            // }
            setData(a);
            if (a.jd == '' || a.wd == '' || a.jd == null || a.wd == null) {
               console.log('没有坐标', i)
            } else {
               setData(a);
            }

            // marker.bindPopup(title);
            markers.addLayer(marker);
         }
         map.addLayer(markers);
			

         markers.on('click', function(a) {
            // that.drawer = true;
            // that.seedata = a.layer.options.myData;
@@ -211,9 +215,10 @@
            if (query == "") {
               $("#mh_query").html("");
            } else {
               html = "<ul>"
               html += "<ul>";
               for (var i = 0; i < res.length; i++) {
                  html += "<li id='" + i + "'>" + res[i].name + "<br><span>"+ res[i].address +"</span>" +"</li>"
                  html += "<li id='" + i + "'>" + res[i].name + "<br><span>" + res[i].address +
                     "</span>" + "</li>"
               }
               html += "</ul>"
               $("#mh_query").append(html);
@@ -221,32 +226,84 @@

            //添加景点li点击事件，地图定位
            $('#mh_query li').click(function() {
					

               var ids = $(this).attr("id");

               $("#mh_query").html("");

               alert(that.ZBCXresult[ids].name);
					
               that.showPolyLine();
               // alert(that.ZBCXresult[ids].name);
               //获取导航信息
               axios({
                  method: "get",
                  url: `https://web.byisf.com/sf/rp/v2/api`,
                  params: {
                     ak: "1986afc8a5744263971b7f2482253dfc",
                     x1: "114.95675749182703",
                     y1: "25.84163062532512",
                     x2: that.ZBCXresult[ids].location.lng,
                     y2: that.ZBCXresult[ids].location.lat,
                     type: "1",
                     strategy: "0",
                     opt: "sf2"
                  },
               }).then((res) => {
                  var resdata = res.data.result.coords;
                  var data = [];
                  for (var i = 0; i < resdata.length; i++) {
                     var xy = [];
                     xy.push(resdata[i][1]);
                     xy.push(resdata[i][0]);
                     data.push(xy);
                  }

                  //绘制起点和终点
                  var markers = L.markerClusterGroup();

                  var transportIcon = L.Icon.extend({ //图标初始化
                     options: {
                        iconSize: [30, 30], // 图标尺寸
                     }
                  });
                  var qd = new transportIcon({
                     iconUrl: './img/green.png'
                  });
                  var zd = new transportIcon({
                     iconUrl: './img/green.png'
                  });

                  var qdzb = res.data.result.query;

                  markers.addLayer(L.marker([qdzb.start.x, qdzb.start.y], {
                     icon: qd,
                  }));
                  markers.addLayer(L.marker([qdzb.end.x, qdzb.end.y], {
                     icon: zd,
                  }));
                  that.map.addLayer(markers);


                  that.showPolyLine(data);
               });

            });
         });

         this.mh_query_show = true;
      },
      showPolyLine() {
         debugger
      showPolyLine(xy) {
         var that = this;
          var latlngs = [
              [28.6903406054147, 115.864347222654],
              [28.6897382596267, 115.860570672361],
              [28.6876, 115.858],
              [28.6791, 115.854]
          ];
          var polyline = L.polyline(latlngs, { color: 'red' }).addTo(that.map);
		
          // zoom the map to the polyline
          that.map.fitBounds(polyline.getBounds())
         var latlngs = [
            [28.6903406054147, 115.864347222654],
            [28.6897382596267, 115.860570672361],
            [28.6876, 115.858],
            [28.6791, 115.854]
         ];
         var polyline = L.polyline(xy, {
            color: 'red'
         }).addTo(that.map);

         // zoom the map to the polyline
         that.map.fitBounds(polyline.getBounds())
      },

   },