網上看了很多Vue中高德地圖的Demo,感覺零零碎碎的，有些說到一半就不知道怎麼回事了。在此記錄下（這是我遇到的情況，如有其他坑，請自行踩坑）

忘了說了 這是基於element ui 的選單欄做的 ，如不需要，自行剔除相關程式碼樣式，重新寫個滑塊導航

一、安裝npm

npm i @amap/amap-jsapi-loader --save

二、引入

 1
 
     <el-menu
 2       :default-active="activeIndex"
 3       class="el-menu-demo"
 4       mode="horizontal"
 5       @select="handleSelect"
 6     >
 7       <el-menu-item index="1">交通</el-menu-item>
 8       <el-menu-item index="2">娛樂</el-menu-item>
 9       <el-menu-item index="3">商場</el-menu-item>
10
 
       <el-menu-item index="4">學校</el-menu-item>
11       <el-menu-item index="5">醫療</el-menu-item>
12     </el-menu>
13     <div class="album" id="album"></div>
14   </div>

JS Demo:

 1 export default {
 2   created() {
 3     this.initAMap();
 
 4   },
 5   data() {
 6     return {
 7       activeIndex: "1",
 8     };
 9   },
10   mounted() {},
11   methods: {
12     // 周邊搜尋
13     searchNear(mapNew) {
14       mapNew.clearMap();
15       let placeSearch = new AMap.PlaceSearch({
16         // city: '', // 興趣點城市
17         citylimit: true, // 是否強制在設定的城市內搜尋，預設false
18         type: "地鐵", // 興趣點類別，用‘|’分隔，預設：'餐飲服務|商務住宅|生活服務'
19         pageSize: 20, // 每頁條數，預設10，範圍1-50
20         pageIndex: 1, // 頁碼
21         extensions: "all", // 預設base，返回基本地址資訊；all：返回詳細資訊
22         // map: AMap, // 地圖例項，可選
23         // panel: 'panel', // 結果列表的id容器，可選
24         autoFitView: true, // 是否自動調整地圖視野到marker點都處於可見範圍
25       });
26 
27       let keywords = "", // 關鍵字
28         position = [104.070081, 30.581108], // 中心點經緯度
29         radius = 2000; // 搜尋半徑 0-50000
30       placeSearch.searchNearBy(
31         keywords,
32         position,
33         radius,
34         function (status, result) {
35           console.log(mapNew, "地圖實列");
36           // var icon = new AMap.Icon({
37           //   size: new AMap.Size(10, 10), // 圖示尺寸
38           //   image: iconquyu, // Icon的影象
39           //   imageOffset: new AMap.Pixel(0, -60), // 影象相對展示區域的偏移量，適於雪碧圖等
40           //   imageSize: new AMap.Size(40, 50), // 根據所設定的大小拉伸或壓縮圖片
41           // });
42           // console.log(icon,"圖片");
43           new AMap.Marker({
44               position: [
45                 104.070081,
46                 30.581108,
47               ], //不同標記點的經緯度s
48               // icon: "http://store.is.autonavi.com/showpic/2f754f895d410592bdf46eeddc379bee",//中心點icon
49               title: 'aaa',
50               clickable:true,
51               // content:result.poiList.pois[i].name,
52               // text:result.poiList.pois[i].name,
53               // offset:[0,50],
54               map: mapNew,
55             });
56           for (let i = 0; i < result.poiList.pois.length; i++) {
57             new AMap.Marker({
58               position: [
59                 result.poiList.pois[i].location.lng,
60                 result.poiList.pois[i].location.lat,
61               ], //不同標記點的經緯度 
62               // icon: "http://store.is.autonavi.com/showpic/2f754f895d410592bdf46eeddc379bee",
63               title: result.poiList.pois[i].name,
64               clickable:true,
65               // content:result.poiList.pois[i].name,
66               // text:result.poiList.pois[i].name,
67               // offset:[0,50],
68               map: mapNew,
69             });
70           }
71           console.log(status, result, "結果"); //這個結果可以看出周邊的很多資訊列表，根據結果做很多事，如果要翻頁，請移步官網 在此如有需要  附連結https://lbs.amap.com/api/webservice/guide/api/newpoisearch
72         }
73       );
74     },
75     handleSelect(key, keyPath) {
76       console.log(key, keyPath);
77     },
78     initAMap() {
79       let that = this;
80       AMapLoader.load({
81         key: "0a3647329c1fceff9e14bcd1a27f4f0d",
82         version: "2.0",
83         plugins: ["AMap.PlaceSearch", "AMap.Geolocation"],
84       })
85         .then((map) => {
86           AMap = map;
87           // 其他功能同h5
88           var mapNew = new AMap.Map("album", {
89             center: [104.070081, 30.581108], // 地圖中心點座標
90             zoom: 15, // 地圖縮放級別
91           });
92           that.searchNear(mapNew);
93         })
94         .catch((e) => {
95           console.log("高德地圖載入錯誤", e);
96         });
97     },
98   },
99 };

Css Demo:

 1 .album {
 2   width: 824px;
 3   height: 532px;
 4   border-radius: 4px;
 5   position: relative;
 6 }
 7 .el-menu.el-menu--horizontal {
 8   border-bottom: none;
 9 }
10 .el-menu--horizontal > .el-menu-item.is-active {
11   border-bottom: none;
12   color: #409eff !important;
13 }
14 .el-menu--horizontal > .el-menu-item {
15   border-bottom: none;
16 }

程式碼看完，如對標記不懂的，移步：https://lbs.amap.com/api/javascript-api/reference/overlay#marker

對路線規劃不懂的，移步：https://lbs.amap.com/api/javascript-api/guide/services/navigation

最後是我對每個功能程式碼期望的 效果圖，順便吐槽下：對那些沒得效果圖的，發出來幹嘛啊 哈哈哈哈

key 自行去搜索高德地圖Api, 到官網的控制檯註冊申請，建立個測試專案就有了

對了 如果對其中引數還不明白的 ，多看官網說明，理解就很簡單了（再附一句，程式碼裡面有很多測試程式碼已註釋，基本沒啥用，忘刪了）