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的官方文檔沒有實例，所以找了很久的例子自己才把想要的效果做出來。

放圖：