前端原生项目动态获取表格数据高德地图画轨迹

最新推荐文章于 2022-11-17 23:14:57 发布

freya_Du

最新推荐文章于 2022-11-17 23:14:57 发布

阅读量898

点赞数 1

文章标签： javascript css html html5 jquery

本文链接：https://blog.csdn.net/freya_Du/article/details/107668920

版权

很久没有写原生项目了，因为是个两个需求的小项目，就写了原生，也顺便回顾一下。
代码全都贴在下面了，有需要的可以参考一下，或者欢迎给我提建议吖～

效果图：
表格页是动态获取数据进行填充的，原生没有vue的v-for之类的，所以渲染表格会稍微麻烦一点
在这里插入图片描述
点击查看详情，筛选时间查看行车轨迹，轨迹是由经纬度坐标点组成的

目录

代码如下

home.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="CSS/base.css">
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <title>终端坐标点查询</title>
  <style>
    body {
   
      background: url(./images//bg-1.jpg) no-repeat;
      background-position: center top;
      background-size: 100% 100%;
      overflow: hidden;
      width: 100%;
      height: 800px;
    }

    td {
   
      vertical-align: middle;
    }

    th {
   
      vertical-align: middle !important;
    }

    .container {
   
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #box {
   
      width: 100%;
      height: 100%;
      margin-top: 100px;
      /* background-color: red; */
    }
  </style>
  <script>
    function click() {
   
      var deviceId = document.getElementById("deviceId").value;
      localStorage.setItem("deviceId", deviceId);
    }

  </script>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
  <div class="container">
    <div id="box">
      <!-- <table>
        <th>车牌颜色</th>
        <th>车牌号码</th>
        <th>终端号</th>
        <th>操作</th>
        <tr for="item in dataArr" :key="item.deviceId">
          <td>{
   {
   item.vehicleColor}}</td>
          <td>{
   {
   item.vehicleId}}</td>
          <td>{
   {
   item.deviceId}}</td>
          <td><a href="#">查看详情</a></td>
        </tr>
      </table> -->
    </div>
  </div>
  <script>
    const dataArr = []
    $.ajax({
   
      url: 'http://103.12.234.206:8083/api/geoa/listVehicle',
      type: 'post',
      contentType: "application/json; charset=utf-8",
      dataType: 'json',
      // data: JSON.stringify(data),
      success: function (data) {
   
        console.log(this, 'this')
        this.dataArr = data.data
        var headDatas = ['车牌颜色', '车牌号码'

最低0.47元/天解锁文章

freya_Du

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端原生项目动态获取表格数据高德地图画轨迹

很久没有写原生项目了，因为是个两个需求的小项目，就写了原生，也顺便回顾一下。代码全都贴在下面了，有需要的可以参考一下，或者欢迎给我提建议吖～效果图：表格页是动态获取数据进行填充的，原生没有vue的v-for之类的，所以渲染表格会稍微麻烦一点点击查看详情，筛选时间查看行车轨迹，轨迹是由经纬度坐标点组成的目录代码如下home.html:<!DOCTYPE html><html lang="en"><head> <meta charset=
复制链接

扫一扫