In this article you can learn how to use Amap in Vue

1. Introduction

Recently, a Web application developed for vehicle track uses Amap. As Party A’s father cannot provide real data, and Google and Baidu cannot find appropriate simulation data, so I made a tool for driving route according to THE JS API of AmAP. This tool is developed using: Vue, ElementUI, VUE-AMap, vue-JSON-viewer.

Example address: Vince -lee92.github. IO /example-rep… Source code address:

• Github:github.com/vince-lee92…
• Gitee:gitee.com/vince-lee/l…

2. The coding

2.1. Install and configure plug-ins

Install: NPM install element-ui vue-amap –save configuration: main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueAMap from 'vue-amap';
import JsonViewer from 'vue-json-viewer';

Vue.use(ElementUI);
Vue.use(JsonViewer)
Vue.use(VueAMap);

window.mapKey = "Your KEY"
window.mapPlugin = [
    "AMap.DragRoute",]window.mapVersion = "1.4.4"
VueAMap.initAMapApiLoader({
    key: window.mapKey,
    plugin: window.mapPlugin,
    v: window.mapVersion
});
Vue.config.productionTip = false
new Vue({
    router,
    store,
    render: h= > h(App)
}).$mount('#app')
Copy the code

2.2. The encoding

<template>
  <div class="drag-route">
    <el-amap
        class="amap-box"
        :amap-manager="amapManager"
        :vid="'amap-vue'"
        :events="mapEvents"
        mapStyle="amap://styles/whitesmoke"
    >
      <div class="action">
        <el-button type="primary" @click="visible = true">Look at the JSON</el-button>
      </div>
    </el-amap>
    <el-dialog
        title="Look at the JSON"
        center
        :visible.sync="visible"
    >
      <json-viewer
          :value="routerData"
          :expand-depth="5"
          :copyable="copyable"
          sort
      />
    </el-dialog>
  </div>
</template>
<script>
const amapManager = new window.VueAMap.AMapManager();

export default {
  name: 'About'.data() {
    const that = this
    return {
      routerData: [].visible: true.copyable: {copyText: 'copy JSON'.copiedText: 'Copy successful'.timeout: 2000},
      amapManager,
      mapEvents: {
        complete() {
          that.DragRoute()
        },
        click(e) {
          const {lng, lat} = e.lnglat
          console.log('The latitude and longitude of your click point is:${lng}.${lat}`)
          const str = `${lng}|${lat}`
          console.log(str)
        }
      },
    };
  },
  methods: {
    DragRoute() {
      const map = this.amapManager.getMap();
      const path = [];
      path.push([116.303843.39.983412]);
      path.push([116.321354.39.896436]);
      map.plugin("AMap.DragRoute".() = > {
        const route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); // Construct the drag-and-drop navigation class
        route.getRoute(function (type, target, data) {
          console.log(type, target, data)
        }); // Query the navigation path and enable drag-and-drop navigation
        route.search(); // Query the navigation path and enable drag-and-drop navigation
        route.on('complete'.(arr) = > {
          this.routerData = arr.target.La }) }); }}};</script>
<style>
* {
  margin: 0;
  padding: 0;
}

.drag-route {
  height: 100vh;
  position: relative;

}

.drag-route .action {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-dialog__body {
  height: 450px;
  overflow: auto;
}
</style>
Copy the code

End of the 3.

In this case, just use amap. DragRoute as an example, but there are many examples available on the official website. For example: lbs.amap.com/api/javascr…