master

分支 (1)

管理

管理

master

bMap-mapSmoothMarker
/
views
/
index.ejs

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>百度地图平移</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<body>
  <div id="baMap" style="height: 100%;"></div>
  <button style="height:40px;position: fixed;bottom: 10px;right:30%;" onclick="getSocket()">已接到乘客->行程</button>
  <div class="info" style="width:100%;background-color:#fff;padding:0 20px;position: fixed;top: 0px;left:0;">
    <div class="jl"></div>
    <div class="py">偏移量：0</div>
    <div class="gh">规划次数：0</div>
  </div>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4yDlV6XIhIb6R25BgwNp26veQwqswhmA"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
  <script type="text/javascript" src="/javascripts/socket.io-client/socket.io.js"></script>
  <script type="text/javascript" src="/javascripts/mapSmoothMarker.js"></script>
  <script>
    //连接socket后端服务器
    var socket = io.connect("ws://192.168.1.111:33660");
    socket.on('connect', function () {
      //连接成功
      console.log("Socket->ok:33660", new Date());
    });
    socket.on('disconnect', function (data) {
      //连接断开
      console.error("Socket->Error", data, new Date());
    });
    function getSocket() {
      var aa = confirm("是否开始行程？");
      oldPoint = start;
      if (aa) {
        // socket.send(new Date().getTime());
        //35-1532335023267
        // socket.emit("receiveClient","87-1532332172578");//电脑
        socket.emit("receiveClient","35-1532335023267");//手机
      }
    }
  </script>
  <script>
    var map = new BMap.Map("baMap");
    map.centerAndZoom(new BMap.Point(106.757, 31.873), 14);
    map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
    map.addControl(new BMap.ScaleControl());// 添加比例尺控件
    map.addControl(new BMap.NavigationControl());// 添加平移缩放控件
    var myIcon1 = new BMap.Icon("/01.png", new BMap.Size(20.25, 24.75), {
      imageSize: new BMap.Size(20.25, 24.75)
    });//上车
    var myIcon2 = new BMap.Icon("/02.png", new BMap.Size(20.25, 24.75), {
      imageSize: new BMap.Size(20.25, 24.75)
    });//下车
    var myIcon = new BMap.Icon("/bus.png", new BMap.Size(30, 19), {
      imageSize: new BMap.Size(30, 19)
    });//卡车
  </script>
  <script type="text/javascript">
    var polylineArr = [], ptemp = [];
    var driving = new BMap.DrivingRoute(map, {
      onSearchComplete: (data) => {
        if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
          var plan = driving.getResults().getPlan(0);
          var num = plan.getNumRoutes();
          var ps_ = [];
          ptemp = [];
          for (var j = 0; j < num; j++) {
            polylineArr[j] ? map.removeOverlay(polylineArr[j]) : "";//如果路线为真-则处理
            var point_ = plan.getRoute(j).getPath();
            ps_[j] = point_;
            var polyline = new BMap.Polyline(point_);
            polylineArr[j] = polyline;
            map.addOverlay(polyline);
          };
          ps_.forEach(function (val) {
            Array.prototype.push.apply(ptemp, val);
          });
          map.setViewport(ptemp);
          // console.log("渲染完成->", data);
        };
      },
      onPolylinesSet: (data) => {
        console.log("画图完成->", data.getPlan(), oldPoint);
      }
    });
    // driving.setPolicy(BMAP_DRIVING_POLICY_AVOID_CONGESTION);
    driving.enableAutoViewport();
    var start = new BMap.Point(106.7632446289062, 31.862472517752668);
    var end = new BMap.Point(106.75643157958979, 31.876993165787926);
    document.querySelector(".info .jl").innerHTML =`起终点距离：`+new markerTranslation().getLineMin([start],end);
    // var zts1 = new BMap.Point(106.75920483336039, 31.866551324204966);
    driving.search(start, end, { waypoints: [] });
    var counts=1;
    var oldPoint = start;
    var carMk1 = new BMap.Marker(start, { icon: myIcon1, offset: new BMap.Size(0, 0) });
    var carMk2 = new BMap.Marker(end, { icon: myIcon2, offset: new BMap.Size(0, 0) });
    var carMk = new BMap.Marker(start, { icon: myIcon, offset: new BMap.Size(0, 0) });
    map.addOverlay(carMk);
    map.addOverlay(carMk1);
    map.addOverlay(carMk2);
    socket.on('message-client', function (data) {//接受到车辆移动->地图推送
      let newPoint = new BMap.Point(data.lon, data.lat);
      console.log("进入推送执行->>", newPoint);
      new markerTranslation().startCar(oldPoint, newPoint, carMk, 500, function (points) {
        // console.log(points);
        document.querySelector(".info .py").innerHTML =`偏移量：`+ new markerTranslation().getLineMin(ptemp, points);
      });//执行动画
      oldPoint = newPoint;
      if(new markerTranslation().getLineMin(ptemp, newPoint)>=150){//如果偏移超过100
        console.log("重新规划路线-->>",counts);
        driving.search(start, end, { waypoints: [newPoint] });//重新规划路线
        counts+=1;
        document.querySelector(".info .gh").innerHTML =`规划次数：${counts}`;
      };
      // carMk.setPosition(new BMap.Point(data.lon, data.lat))
    });
  </script>
</body>

</html>