關於VUE使用高德JsApi(二)——初始化地圖
第一步
建立一個初始化vue專案（vue cli建立教程）
第二步
建立mapLoader.js
建立改js目的是為了第一次非同步載入Amap後，在其他需要再次初始化時，不用再次去非同步連線jsapi，可以直接呼叫已經載入好的物件
import AMapLoader from '@amap/amap-jsapi-loader'; export default function MapLoader () { // <-- 原作者這裡使用的是module.exports return new Promise((resolve, reject) => { if (window.AMap) { // console.log("已經載入過了"); resolve(window.AMap) } else { console.log("載入高德地圖"); AMapLoader.load({ "key": "申請好的key值", // 申請好的Web端開發者Key，首次呼叫 load 時必填 "version": "1.4.15", // 指定要載入的 JSAPI 的版本，預設時預設為 1.4.15 "plugins": ['AMap.moveAnimation','AMap.ToolBar','AMap.Marker','AMap.Driving','AMap.DistrictSearch','AMap.Autocomplete','AMap.PlaceSearch','AMap.MouseTool','AMap.Geocoder','AMap.Weather'], // 需要使用的的外掛列表，如比例尺'AMap.Scale'等 "AMapUI": { // 是否載入 AMapUI，預設不載入 "version": '1.1', // AMapUI 預設 1.1 "plugins":['overlay/SimpleMarker'], // 需要載入的 AMapUI ui外掛 }, // "Loca":{ // 是否載入 Loca， 預設不載入 // "version": '2.0' // Loca 版本，預設 1.3.2 注：api版2.0不相容Loca 2.0版本 // }, }).then((AMap)=>{ resolve(AMap) } ).catch((e)=>{ reject(e) } ) } }) }