极快上手Vue通过百度地图插件——vue-baidu-map插件实现地图轨迹和路线等功能

现在挺多博主都做的挺完整的地图文档使用介绍等等，但有时候我们接触去选择自己做的效果时候还是会遇到很多不同的问题。

这里我把我自己个人在各个检索下的文章，做出自己想要的效果地图，基础地图功能＋路线 运动轨迹的过程介绍一下对应组件使用与注意事项。

效果图

PC端，有切换地图类型、定位、缩放、标签、路线、轨迹等效果的百度地图嵌入。

 第一步：先下载百度插件

npm install vue-百度-map --save

第二步：获取百度地图平台的ak密钥

就是在百度地图自己去注册申请一个ak密钥。
第一步：点击此链接jspopularGL | 百度地图API SDK (百度.com)

第一步：点击此链接

第三步：在main.js里面全局注册

完整代码：

1.  
   <template>
2.  
   <!-- 地图 -->
3.  
   <div style="float:left;width:100%">
4.  
   <el-card style="height: 60vh;margin-top:20px">
5.  
   <!-- <el-input placeholder="请输入地址" v-model="input3" class="input-with-select">
6.  
   <el-button slot="append" icon="el-icon-search" @click="inputfz">搜索</el-button>
7.  
   </el-input> -->
8.  
   <!--
9.  
   scroll-wheel-zoom是是否可以缩放
10.  
    @ready是图加载完后触发事件
11.  
    center是位置定位
12.  
    zoom是缩放大小限制
13.  
    inertial-dragging是允许惯性拖拽
14.  
    -->
15.  
    <百度-map class="bm-view" :zoom="15" :center="center" inertial-dragging @ready="mapReady"
16.  
    :scroll-wheel-zoom="true">
17.  
    <!-- 定位控件 anchor="BMAP_ANCHOR_BOTTOM_RIGHT"代表放在右下角 -->
18.  
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true"
19.  
    :autoLocation="true"></bm-geolocation>
20.  
    <!-- 地区检索 keyword：关键字搜索 @searchcomplete：检索完成后的回调函数 auto-viewport：检索结束后是否自动调整地图事业 -->
21.  
    <!-- <bm-local-search :keyword="keyword" @searchcomplete="search" :auto-viewport="true"
22.  
    class="search"></bm-local-search> -->
23.  
    <!-- 地图类型切换 -->
24.  
    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
25.  
    anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
26.  
    <!-- 缩放控件 anchor代表控件停靠位置 anchor="BMAP_ANCHOR_TOP_RIGHT"代表放在右上角-->
27.  
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
28.  
    <!-- 路书 -->
29.  
    <!-- <bm-driving :start="start" :end="end" :panel="false" @stop="reset" :autoViewport="false"></bm-driving> -->
30.  
    <bml-lushu :path="lushuPath" :icon="icon" :speed="speed" :content="powerSips" :rotation="true">
31.  
    </bml-lushu>
32.  
    <!-- 轨迹 -->
33.  
    <new-polyline :path="polylinePath" :editing="false" :icons="icons" stroke-color="#8ba0fb"
34.  
    :stroke-opacity="1" :stroke-weight="8" @lineupdate="updatePolylinePath"></new-polyline>
35.  
    <!-- 起点终点 -->
36.  
    <bm-marker :position="startPoint" :dragging="true" @click="infoWindowOpen">
37.  
    <bm-label content="起点" :labelStyle="{ color: 'black', fontSize: '16px' }"
38.  
    :offset="{ width: -35, height: 30 }" />
39.  
    </bm-marker>
40.  
    <bm-marker :position="endPoint" :dragging="true" @click="infoWindowOpen">
41.  
    <bm-label content="终点" :labelStyle="{ color: 'black', fontSize: '16px' }"
42.  
    :offset="{ width: -35, height: 30 }" />
43.  
    </bm-marker>
44.  
    </百度-map>
45.  
    </el-card>
46.  
    </div>
47.  
    </template>
48.  
     
49.  
    <script>
50.  
    import {
51.  
    BaiduMap,
52.  
    BmControl,
53.  
    BmView,
54.  
    BmAutoComplete,
55.  
    BmLocalSearch,
56.  
    BmMarker,
57.  
    BmGeolocation,
58.  
    BmlLushu
59.  
    } from "vue-百度-map";
60.  
    import {
61.  
    jgTransportDetails,
62.  
    } from "@/api/regionalWaste/supervision";
63.  
    import newPolyline from "./new_polyline.vue";
64.  
    export default {
65.  
    components: {
66.  
    Dialog,
67.  
    BaiduMap,
68.  
    BmControl,
69.  
    BmView,
70.  
    BmAutoComplete,
71.  
    BmLocalSearch,
72.  
    BmMarker,
73.  
    BmGeolocation,
74.  
    newPolyline,
75.  
    BmlLushu,
76.  
    },
77.  
    data() {
78.  
    return {
79.  
    //定位位置信息
80.  
    center: {
81.  
    lng: 116.404, lat: 39.915
82.  
    },
83.  
    // //检索关键字
84.  
    // keyword: "",
85.  
    // //输入框input值
86.  
    // input3: "",
87.  
    polylinePath: [
88.  
    { lng: 116.404, lat: 39.915 },
89.  
    { lng: 116.405, lat: 39.920 },
90.  
    { lng: 116.423493, lat: 39.907445 }
91.  
    ],
92.  
    lushuPath: [],
93.  
    startPoint: { lng: 116.404, lat: 39.915 },
94.  
    endPoint: { lng: 116.423493, lat: 39.907445 },
95.  
    icons: [],
96.  
    icon: {
97.  
    url: "https://s1.ax1x.com/2023/06/20/pC80IAJ.png",
98.  
    size: {
99.  
    width: 52,
100.  
     height: 52,
101.  
     },
102.  
     powerSips: "医废运输", //轨迹名称
103.  
     color: "", //轨迹颜色
104.  
     start: "", //起点
105.  
     end: "", //终点
106.  
     speed: 20, //轨迹速度
107.  
     powerShow: false, //轨迹显示隐
108.  
     enableRotation: true,
109.  
     BMaps: undefined
110.  
     },
111.  
     }
112.  
     },
113.  
     methods: {
114.  
     getInfo() {
115.  
     jgTransportDetails(this.Gjid).then(res => {
116.  
     if (res.code === 200) {
117.  
     this.form = res.data
118.  
     let routeList = []
119.  
     routeList = JSON.parse(res.data.routes).map(i => {
120.  
     return {
121.  
     lng: i.jindu,
122.  
     lat: i.weidu,
123.  
     }
124.  
     });
125.  
     this.polylinePath = routeList
126.  
     // this.form.weightDifference = res.data.yfDetailList.weightDifference
127.  
     this.guiji()
128.  
     }
129.  
     })
130.  
     },
131.  
     //输入框
132.  
     // inputfz() {
133.  
     // this.keyword = this.input3;
134.  
     // },
135.  
     //地图加载后的回调
136.  
     mapReady({ BMap, map }) {
137.  
     this.getInfo()
138.  
     this.lushuPath = []
139.  
     //保存this指向，因为在百度的回调中this不指向vue
140.  
     const _this = this;
141.  
     // 路书车辆旋转
142.  
     this.polylinePath.forEach(item => {
143.  
     this.lushuPath.push(
144.  
     new BMap.Point(item.lng, item.lat)
145.  
     )
146.  
     })
147.  
      
148.  
     // 路线箭头颜色
149.  
     var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
150.  
     scale: 1, // 图标缩放大小
151.  
     strokeColor: "#fff", // 设置矢量图标的线填充颜色
152.  
     strokeWeight: "2" // 设置线宽
153.  
     });
154.  
     var icons = new BMap.IconSequence(sy, "10", "30");
155.  
     _this.icons.push(icons)
156.  
     // 获取自动定位方法
157.  
     // var geolocation = new BMap.Geolocation();
158.  
     // // 获取自动定位获取的坐标信息
159.  
     // geolocation.getCurrentPosition(
160.  
     // function (r) {
161.  
     // //可以conso.log看一下这个r，他里面包含了检索到的位置信息。下面就把两个维度信息赋值给center来定位
162.  
     // _this.center = {
163.  
     // lng: r.point.lng,
164.  
     // lat: r.point.lat,
165.  
     // };
166.  
     // },
167.  
     // //启用高精度
168.  
     // { enableHighAccuracy: true }
169.  
     // );
170.  
     },
171.  
     reset() {
172.  
     this.play = false;
173.  
     },
174.  
     //轨迹
175.  
     guiji() {
176.  
     // this.center = this.lineList[0];
177.  
     this.start = this.polylinePath[0];
178.  
     this.end = this.polylinePath[this.polylinePath.length - 1];
179.  
     this.play = true;
180.  
     },
181.  
     },
182.  
     created() {
183.  
     if (this.Gjid) {
184.  
     this.getInfo()
185.  
     }
186.  
     }
187.  
      
188.  
     }
189.  
     </script>
190.  
      
191.  
     <style>
192.  
     /* 给个宽高 */
193.  
     .bm-view {
194.  
     height: 500px;
195.  
     margin-top: 20px;
196.  
     width: 100%;
197.  
     }
198.  
      
199.  
     .input-with-select {
200.  
     width: 400px;
201.  
     margin-bottom: 5px;
202.  
     }
203.  
      
204.  
     .search {
205.  
     height: 300px;
206.  
     overflow: auto;
207.  
     }
208.  
     </style>

以上我写的都是用到vue-百度-map的文档里面的组件，大部分都是集中在这几个组件集里面，里面的属性都写的很详细，容易上手与优化

 补充一个点，要是需要像我这样要绘制方向箭头折线，需要重新修改组件，建立新的，详细解析请参考以下这个博主的分享链接：http://t.csdn.cn/nHjjw

以下是我的箭头折线更改组件代码

1.  
   <template>
2.  
    
3.  
   </template>
4.  
   <script>
5.  
   /**
6.  
   * 注意此处三个引入路径
7.  
   * 在源文件中使用的是相对路径
8.  
   * 但是因为现在是自定义组件,所以要重新调整路径
9.  
   */
10.  
    import commonMixin from "../../../../node_modules/vue-百度-map/components/base/mixins/common.js";
11.  
    import bindEvents from "../../../../node_modules/vue-百度-map/components/base/bindEvent.js";
12.  
    import { createPoint } from "../../../../node_modules/vue-百度-map/components/base/factory.js";
13.  
     
14.  
    export default {
15.  
    // 起一个新名字
16.  
    name: "new-polyline",
17.  
    render() {},
18.  
    mixins: [commonMixin("overlay")],
19.  
    props: {
20.  
    path: {
21.  
    type: Array
22.  
    },
23.  
    // 新声明一个icons
24.  
    icons: {
25.  
    type: Array
26.  
    },
27.  
    strokeColor: {
28.  
    type: String
29.  
    },
30.  
    strokeWeight: {
31.  
    type: Number
32.  
    },
33.  
    strokeOpacity: {
34.  
    type: Number
35.  
    },
36.  
    strokeStyle: {
37.  
    type: String
38.  
    },
39.  
    massClear: {
40.  
    type: Boolean,
41.  
    default: true
42.  
    },
43.  
    clicking: {
44.  
    type: Boolean,
45.  
    default: true
46.  
    },
47.  
    editing: {
48.  
    type: Boolean,
49.  
    default: false
50.  
    }
51.  
    },
52.  
    watch: {
53.  
    path: {
54.  
    handler(val, oldVal) {
55.  
    this.reload();
56.  
    },
57.  
    deep: true
58.  
    },
59.  
    strokeColor(val) {
60.  
    this.originInstance.setStrokeColor(val);
61.  
    },
62.  
    strokeOpacity(val) {
63.  
    this.originInstance.setStrokeOpacity(val);
64.  
    },
65.  
    strokeWeight(val) {
66.  
    this.originInstance.setStrokeWeight(val);
67.  
    },
68.  
    strokeStyle(val) {
69.  
    this.originInstance.setStrokeStyle(val);
70.  
    },
71.  
    editing(val) {
72.  
    val
73.  
    ? this.originInstance.enableEditing()
74.  
    : this.originInstance.disableEditing();
75.  
    },
76.  
    massClear(val) {
77.  
    val
78.  
    ? this.originInstance.enableMassClear()
79.  
    : this.originInstance.disableMassClear();
80.  
    },
81.  
    clicking(val) {
82.  
    this.reload();
83.  
    }
84.  
    },
85.  
    methods: {
86.  
    load() {
87.  
    const {
88.  
    BMap,
89.  
    map,
90.  
    path,
91.  
    // 参数解构 加入icons
92.  
    icons,
93.  
    strokeColor,
94.  
    strokeWeight,
95.  
    strokeOpacity,
96.  
    strokeStyle,
97.  
    editing,
98.  
    massClear,
99.  
    clicking
100.  
     } = this;
101.  
     const overlay = new BMap.Polyline(
102.  
     path.map(item =>
103.  
     createPoint(BMap, {
104.  
     lng: parseFloat(item.lng),
105.  
     lat: parseFloat(item.lat)
106.  
     })
107.  
     ),
108.  
     {
109.  
     strokeColor,
110.  
     strokeWeight,
111.  
     strokeOpacity,
112.  
     strokeStyle,
113.  
     // 配置icons
114.  
     icons,
115.  
     enableEditing: editing,
116.  
     enableMassClear: massClear,
117.  
     enableClicking: clicking
118.  
     }
119.  
     );
120.  
     this.originInstance = overlay;
121.  
     map.addOverlay(overlay);
122.  
     bindEvents.call(this, overlay);
123.  
     }
124.  
     }
125.  
     };
126.  
     </script>
127.  
      

这篇好文章是转载于：学新通技术网