vue-amap小結

vue-amap:高德地圖API   

我主要作的是點座標＋信息窗體展現。

新建一個vue項目，下載vue-amap/axios。在項目中引入，並將axios設置全局

vue-amap須要本身的專屬key值，key申請地址：https://lbs.amap.com/dev/id/newuser

在index.js---module.exports---dev中添加接口的配置

proxyTable: { '/third' : {
 target: '***************', // 測試服務器地址
 changeOrigin: true,//容許跨域
 pathRewrite: {
 '^/third': '/third'
　　　　}
　　　}
　}

以後是app.vue

一步一步實現:先實現點座標      https://elemefe.github.io/vue-amap/#/zh-cn/coverings/marker（點座標文檔）

在data中聲名markets，數組形式，用來存放請求到的點座標的座標，以及每一個點座標的響應事件。

數據形式：

markers: [ { position: [121.5273285, 31.21515044], events: { click: () => { alert('click marker'); }, dragend: (e) => { console.log('---event---: dragend') this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]; } } } ],

position:點座標的座標值，events---click對點座標點擊的響應事件，其中e參數帶的有用信息爲每一個點座標的下標e.target.Uh.vid，和每一個點座標的經緯度e.lnglat.lng和e.lnglat.lat

處理好點座標  而後讓信息窗體顯示粗來。

聲名windows和currentWindow  來控制每一個點座標對應的窗體。

 

在點座標的點擊事件中獲取經緯度，設置visiable（控制信息窗體顯示隱藏，官網可查），在e中獲取到下標  將點擊的windows窗體的信息賦給currentWindow，將currentWindow的visiable的屬性設爲true。

最後打包須要把index.js的build設置assetsPublicPath: './',

打包撂給後臺

PS:設置地圖的背景：在<el-amap>中添加:mapStyle='mapStyle'，在data裏面聲名mapStyle：‘’，在mounted對this.mapStyle='你的地圖樣式'，ok、

　　設置markets的樣式：在markets的數據中加一個屬性icon，也是string屬性，直接寫圖片地址。

寫博客很少~語言組織混亂。見諒