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屬性，直接寫圖片地址。

寫博客不多~語言組織混亂。見諒