Vue使用百度地图绘制人员历史轨迹

最新推荐文章于 2025-06-16 10:22:37 发布

sea9528

最新推荐文章于 2025-06-16 10:22:37 发布

阅读量2.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/sea9528/article/details/115937829

Vue使用百度地图绘制人员历史轨迹

在这里插入图片描述

使用

1.index.html 中引入百度地图在线链接

<!DOCTYPE html>
<html lang="zh-CH">

<head>
  <meta charset="utf-8">
  <!--必须要加 启用360浏览器的极速模式-->
  <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="./logo.png">
  <!-- 引入百度地图在线链接 -->
 <link rel="stylesheet" href="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
  <script src="//api.map.baidu.com/api?type=webgl&v=3.0&ak=AWiSVwyAuNmbrhuNq1hjXAZV1SjmX3ld"></script>
  <script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>

  <!-- 按需加载外部的cdn 资源 -->
  <% if(htmlWebpackPlugin.options.isProd) {
   
    %>
    <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
  <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" /> -->
  <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
  <!-- 引入cdn 解决首次加载缓慢 -->
  <!-- <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script> -->
  <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
  <!-- element-ui 的 js 文件 -->
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.16.7/cpexcel.min.js"></script>
<% } %>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
  <title><%= htmlWebpackPlugin.options.isProd ? '采集员培训管理系统':'dev-测试环境' %> </title>
</head>
<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app">
  </div>
</body>
</html>

2.具体页面中使用

<template>
  <div class="home">
    <section class="mainbox">
      <div class="content" >
        <div id="map_wrap" :style="{ height: mapHeight }">
          <!--存放百度地图容器-->
          <div id="container"></div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
//如果页面显示不出来地图的话，创建个baidu-map.js  文件， 文件内容在最后。
import BaiduMap from "../plugins/baidu-map";
import {
   
    getusers, select_user_Trajectorys } from "../api/api";

export default {
   
   
  name: "Home",
  components: {
   
   },
  data() {
   
   
    return {
   
   
      user:{
   
   },
      showTime: "",
      totlaNum: "",
      t: "",
      activeName: "first",
      caseTime: "",
      loading: false,
      showTrack: false,
      showTrackFun: "",
      caseTitile: 98,
      map: "", // 保存地图实例
      centerLng: "120.126532", // 经度
      centerLat: "30.282949", // 纬度
      shows: true,
      adminForm: {
   
   
        sdate: "",
        edate: "",
        speed: 1,
      },
      user_icon: "",
      polygon: {
   
   },
      leftpeopleList: [],
      /* 点聚合数组 */
      markers: [],
      peopleNum: 0,
      imagesrc: "../assets/logo.png",
      path: [],
      lushu: {
   
   },
      speed: 20, //速度
      lushu: {
   
   }, //路书
      mycaiId: "",
      myMap: {
   
   }, //地图,
      dotMarker: [],
      presentPeople: {
   
   },
      searchValue: "",
      polyline: [],
      mapHeight:0
    };
  },
  created() {
   
   
    this.t = setTimeout(this.time, 1000);
    this.user=JSON.parse(sessionStorage.getItem('user')) 
    console.log(this.user);
  },
  mounted() {
   
   
    this.initMapHeight()
    this.timing();
    this.timingUpdate();
  },

  methods: {
   
   
    initMap() {
   
   
      BaiduMap.init().then((BMap) => {
   
   
        this.getdata("-1");
        console.log("加载成功...");
      });
    },
	//初始化百度地图，创建地图对象
    createMap() {
   
   
      this.dotMarker = [];
      // 在百度地图容器中创建地图实例
      let map = new BMap.Map("container");
      // 将map变量存储在全局
      this.map = map;
      map.clearOverlays();
      // 设置中心点坐标和地图级别
      this.map.centerAndZoom(
        new BMap.Point(this.centerLng, this.centerLat),
        15
      );
      //获取地图中心点
       // //创建地址解析器实例
        var myGeo