vue-amap地图组件上的折线以及高德地图经纬度的引入

1.如何在项目中安装组件

首先在你的项目中打开控制台运行下面的代码

npm install vue-amap --save

然后在项目中的src文件夹里创建一个文件夹plugins，里面创建一个index.vue的文件，用来引入高德UI组件库

这个index.vue里面这样写:

import Vue from 'vue'
import VueAMap from 'vue-amap'
VueAMap.initAMapApiLoader({
  key: 'ea5c57977d76a95e455c43266788****',//这个key是你在高德api中申请的key，其它的上下都一样
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.zoom'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4',
})
Vue.use(VueAMap)

然后在main.js中引入: import '@/plugins'

2.高德api上的经纬度查询（可以根据自己想要的路线描绘，自己有高德的key和路线接口可以跳过）

1.首先登录认证获取key：

https://lbs.amap.com/api/webservice/guide/create-project/get-key

2.然后在官网首页右上角头像点击自定义地图平台

 

3.然后点击左侧数据中心，我的数据集，点击创建数据库

 

 

 

 4.随便输入一个名字，确认创建，创建好了后点名称，进入到地图，

 

 

点击绘制线，然后就可以在上面绘制自己想要的路线，绘制好后，点击当前绘制的线，，右侧的侧边栏中点击GeoJSON,里面的经纬度就有了，把一对对的经纬度按顺序放进代码中的path数组

3.实现地图上折线的详细代码

<template>
  <div class="gui-ji">
    <a @click="$router.back()">调度单管理/轨迹管理</a>
    <el-amap vid="amap"
             :zoom="zoom"
             :center="center"
             class="amap-demo">
      <el-amap-polyline v-for="prod in polyline"
                        :key="prod.id"
                        :editable="prod.editable"
                        :path="prod.path"
                        outlineColor='#fff000'
                        strokeWeight='8'
                        :events="prod.events"></el-amap-polyline>
    </el-amap>
    <div class="toolbar">
      <button type="button"
              name="button"
              v-on:click="changeEditable">change editable</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      zoom: 14,
      center: [104.065768, 30.657452],
      polyline: [
        {
          id: '1',
          path: [//第一条线的经纬度集合
            [104.114026, 30.65119],
            [104.086022, 30.66433],
            [104.074141, 30.645897],
            [104.061836, 30.647175],
            [104.056745, 30.649365],
            [104.054835, 30.69765],
            [104.041258, 30.641882],
            [104.041046, 30.651738],
            [104.041046, 30.651738],
          ],
          events: {//在地图上打点连线的方法
            click(e) {
              alert('click polyline')
            },
            end: (e) => {
              const newPath = e.target
                .getPath()
                .map((point) => [point.lng, point.lat])
              console.log(newPath)
            },
          },
          editable: false,
        },
        {
          id: '2',
          path: [//第二条线的经纬度集合
            [104.045351, 30.64361],
            [104.044797, 30.643349],
            [104.044502, 30.643254],
            [104.044123, 30.64312],
            [104.0439, 30.643059],
            [104.043689, 30.642958],
            [104.04346, 30.642849],
            [104.043225, 30.642751],
            [104.043023, 30.642652],
            [104.042878, 30.642587],
            [104.042688, 30.642507],
            [104.042488, 30.642424],
            [104.042131, 30.642265],
            [104.041985, 30.642209],
            [104.041877, 30.642151],
            [104.041747, 30.642092],
            [104.041643, 30.64204],
            [104.041564, 30.641987],
            [104.041464, 30.641938],
            [104.04143, 30.641887],
            [104.041356, 30.641841],
            [104.041355, 30.641762],
            [104.041368, 30.641623],
            [104.041382, 30.641563],
            [104.041399, 30.641477],
            [104.041442, 30.641359],
            [104.041463, 30.641295],
            [104.041525, 30.641206],
            [104.041557, 30.641104],
            [104.041618, 30.641011],
            [104.041723, 30.64086],
            [104.04177, 30.640764],
            [104.041854, 30.640668],
            [104.041919, 30.640581],
            [104.041966, 30.640546],
            [104.042013, 30.640469],
            [104.042078, 30.640399],
            [104.042136, 30.640338],
            [104.04218, 30.64029],
            [104.042303, 30.640162],
            [104.042357, 30.640101],
            [104.042492, 30.639969],
            [104.042579, 30.639895],
            [104.042638, 30.639827],
            [104.042718, 30.639759],
            [104.042794, 30.639681],
            [104.042871, 30.639595],
            [104.042932, 30.639543],
            [104.042991, 30.639488],
            [104.043034, 30.639459],
            [104.043131, 30.639527],
            [104.043206, 30.639567],
            [104.043269, 30.639601],
            [104.043366, 30.639657],
            [104.043508, 30.639791],
            [104.043546, 30.639835],
            [104.043587, 30.639847],
            [104.043609, 30.639824],
            [104.043681, 30.639753],
            [104.043736, 30.639708],
            [104.04379, 30.639662],
            [104.043837, 30.639614],
            [104.04388, 30.639572],
            [104.043877, 30.639572],
          ],
          events: {
            click(e) {
              alert('click polyline')
            },
            end: (e) => {
              const newPath = e.target
                .getPath()
                .map((point) => [point.lng, point.lat])
              console.log(newPath)
            },
          },
          editable: false,
        },
      ],
    }
  },
  methods: {
    changeEditable() {
      this.polyline.editable = !this.polyline.editable
    },
  },
}
</script>

<style lang="less" scoped>
.amap-demo {
  height: 500px;
  width: 100%;
}

.amap-page-container {
  position: relative;
}

#info-window {
  width: 211px;
  height: 146px;
  margin-left: 30px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.detail {
  width: 80%;
  height: 24px;
  color: #fff;
  background-color: #1a73e8;
  position: absolute;
  bottom: 0;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}
</style>

里面很多vue-amap的api指令，可以去官方文档看，好像vue-amap的官方文档没有实例，所以找了很久的例子自己才把想要的效果做出来。

放图：