Amap? ??? ? ???? demo?? ?? ??? ????? ??? ??? ?? ???? ???? ?????? vue? ???? ???? ?? ???? ?? ?? ??????. react? demo? vue2? ??? ???? ? ??? ???????. >?? ???? Amap api ???, ???? ??? ???? ?????! demo，但是這些案例都是使用原生方法接入，并沒有提供vue或者react 的demo，vue2的 接入網(wǎng)上也很多人都有寫過，下面本篇文章就來看看 vue3怎么使用常用的高德地圖api，希望對(duì)大家有所幫助！

前置工作

在開發(fā)之前我們需要了解 vue3 中接入高德地圖的幾個(gè)步驟

• 首先安裝包并引入

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

import AMapLoader from '@amap/amap-jsapi-loader'

• 使用官方介紹的方式進(jìn)行加

vue2 和 vue3 是有區(qū)別的，這里我們使用的是 vue3 ，但這里 vue3 的方式還是選項(xiàng)式，不是組合式的，我自己寫的時(shí)候使用的是組合式的，且集成了 ts， 我后面發(fā)布完整 .vue 文件的時(shí)候 會(huì)去掉標(biāo)簽上的 ts，因?yàn)轭愋瓦€沒有完善，等后面完善了再貼更改以后得。為什么要使用 shallowRef 官方也給出了說明原因。 【相關(guān)推薦：vuejs視頻教程、web前端開發(fā)】

示例模塊

這里我直接把我前面，寫過的 地圖業(yè)務(wù)需求的業(yè)務(wù)邏輯拿過來的，沒有使用框架，直接在一個(gè) html 文件當(dāng)中引入，鏈接大家可以點(diǎn)擊下面進(jìn)行查看：
高德地圖jsApi的使用
高德地圖jsApi的點(diǎn)和線配置
高德地圖jsApi的右鍵設(shè)置
高德地圖jsApi的點(diǎn)位新增
高德地圖jsApi的圖例
使用vue3 的時(shí)候，實(shí)例化的方式， this

??

?? ?? ??

????? ?? vue3???? Amap? ????? ??? ???? ???

• ?? ?? ??? ? ????

import AMapLoader from '@amap/amap-jsapi-loader'

const initMap = () => {
  AMapLoader.load({
    key: 'b59c490f61a694b9d7576dd864f74d6e', // 申請(qǐng)好的Web端開發(fā)者Key，首次調(diào)用 load 時(shí)必填
    version: '2.0', // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
    plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    Loca:{
      version:'2.0.0'
    }
  })
    .then((res) => {      
      AMap.value = res
      // 上來就顯示的中心點(diǎn)  北京 116.397, 39.918
      var lnglat = new res.LngLat(105, 38)
      map.value = new res.Map('container', {
        //設(shè)置地圖容器id
        viewMode: '3D', //是否為3D地圖模式
        zoom: 5, //初始化地圖級(jí)別
        center: lnglat, //初始化地圖中心點(diǎn)位置
      })
      map.value.clearMap() // 清除地圖覆蓋物
      // 地圖是否可拖拽和縮放
      map.value.setStatus({
        dragEnable: true, // 是否可拖拽
        zoomEnable: true, // 是否可縮放
      })

      initWindow()
      // 添加一些分布不均的點(diǎn)到地圖上,地圖上添加三個(gè)點(diǎn)標(biāo)記，作為參照
      coordData.forEach(function (marker) {
        setMarker(marker)
      })

      let renderLine = setLine(coordData)
      // 設(shè)置線
      let polyline = renderLine.reduce((prev, item, index) => {
        let weight = item.type === 1 ? 5 : 3
        let color = item.type === 1 ? headColors[0] : headColors[1]
        prev.push(setLines(item.current, color, weight))
        return prev
      }, [])
      map.value.add([...polyline]) // 繪制線
      //創(chuàng)建右鍵菜單
      menuInstance.value = new ContextMenu(map.value)
      let loca = new Loca.Container({
          map:map.value,
      });
      window._loca = loca;

      // 圖例, 圖例可以實(shí)例化多個(gè)，使用定位來設(shè)置位置
      let lengend = new Loca.Legend({
          loca: loca,
          title: {
              label: '管道類型',
              fontColor: 'rgba(255,255,255,1)',
              fontSize: '16px'
          },
          style: {
              backgroundColor: 'rgba(255,255,255,0.2)',
              left: '20px',
              bottom: '40px',
              fontSize: '12px'
          },
          dataMap: [
              { label: '省級(jí)管道', color: headColors[1] },
              { label: '縣級(jí)管道', color: headColors[0] },
          ],
      });

      //修改圖例排列方式
      document.getElementsByClassName("amap-loca loca-controls")[0].setAttribute('id', 'testid')
        var lis = document.querySelectorAll("#testid li");
        for (var i = 0; i < lis.length; i++) {
          console.log(lis[i]);
          lis[i].setAttribute("class", 'test'
          );
      }
    })
    .catch((e) => {
      console.log('error', e)
    })
}
onMounted(() => {
  initMap()
})

rrree

• ?? ????? ??? ?? ????

?? < img src="https://img.php.cn/upload/article/000/000/024/a1bec500b7cc33094fecd804f23d9718-0.png" alt="vue3?? Amap API? ???? ??? ?? ???? ?????." loading="lazy"/ > vue2? vue3? ????. ???? vue3? ????? vue3? ???? ??? ?????. ?? ?? ??? ?? ???? ???? ts? ?????, ??? ??? .vue ??? ??? ? ???????. ???? ?? ??? ???? ??? ??? ??? ???? ????? ???????. shallowRef? ???? ??? ?????? ???? ??? ?? ????. [?? ????: vuejs ??? ????, ? ????? ??]??

?? ??

??????? ??? ??? ?? ???? ????? ???? ??? ?????? ???? ?? ?? HTML ??? ??? ? ????. ??? ????? ??? ?????.
Amap jsApi ??
Amap jsApi? ? ? ? ??
Amap jsApi? ??? ??? ?? ?? ??
Amap jsApi? ??? ???
Amap jsApi ??
?? vue3 ?? ?, ????? ??, ? ??, ??? ??? ?? ? ??? ?? ??? ?? ???? ??? ??? ?? ????????

模塊的引入

• 首先導(dǎo)入的方式，和官網(wǎng)一樣，后面我會(huì)貼完整代碼， 這里我們使用 plugins 加載插件， 其他配置如 Loca， 直接進(jìn)行配置， 這里需要注意版本問題， 寫成 ‘2.0’ 是不行的，初始化函數(shù)在 onmounted 生命周期中執(zhí)行。
• AMap存儲(chǔ) 這里我做了很多存儲(chǔ)，大家知道 .value 的語法是 vue3 獲取 ref 的語法，我下面使用到的 都是ref，后面完整代碼可以查看， 這里掛載的時(shí)候直接存一下，因?yàn)楹芏喙ぞ叻椒ǘ紩?huì)只用到他，這里后期業(yè)務(wù)邏輯我會(huì)抽離到 pinia中去，所以不需要在初始化函數(shù)中寫全部的業(yè)務(wù)邏輯。
• 模版樣式不生效問題， 我們?cè)谑褂玫臅r(shí)候， 就像我之前寫的文章，點(diǎn)位新增的時(shí)候，我們會(huì)插入 content 字符串模版，替換點(diǎn)樣式，這里有兩種方案修改樣式，一種是 插入 DOM ，不使用字符串，然后在 DOM 上通過 style 直接修改樣式，另一種就是使用模版的時(shí)候直接給 class 類名，但是這種樣式如果我們給 vue 的 style 加了 scoped 就不會(huì)生效，這里大家可以自己靈活選擇用哪種，我這里暫時(shí)先使用模版的方式，去掉了 scoped。
• 圖例， 圖例這里除了導(dǎo)入的時(shí)候，需要配置一下，使用上來說變化不大，樣式的修改還是復(fù)用了我之前的邏輯。

import AMapLoader from '@amap/amap-jsapi-loader'

const initMap = () => {
  AMapLoader.load({
    key: 'b59c490f61a694b9d7576dd864f74d6e', // 申請(qǐng)好的Web端開發(fā)者Key，首次調(diào)用 load 時(shí)必填
    version: '2.0', // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
    plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    Loca:{
      version:'2.0.0'
    }
  })
    .then((res) => {      
      AMap.value = res
      // 上來就顯示的中心點(diǎn)  北京 116.397, 39.918
      var lnglat = new res.LngLat(105, 38)
      map.value = new res.Map('container', {
        //設(shè)置地圖容器id
        viewMode: '3D', //是否為3D地圖模式
        zoom: 5, //初始化地圖級(jí)別
        center: lnglat, //初始化地圖中心點(diǎn)位置
      })
      map.value.clearMap() // 清除地圖覆蓋物
      // 地圖是否可拖拽和縮放
      map.value.setStatus({
        dragEnable: true, // 是否可拖拽
        zoomEnable: true, // 是否可縮放
      })

      initWindow()
      // 添加一些分布不均的點(diǎn)到地圖上,地圖上添加三個(gè)點(diǎn)標(biāo)記，作為參照
      coordData.forEach(function (marker) {
        setMarker(marker)
      })

      let renderLine = setLine(coordData)
      // 設(shè)置線
      let polyline = renderLine.reduce((prev, item, index) => {
        let weight = item.type === 1 ? 5 : 3
        let color = item.type === 1 ? headColors[0] : headColors[1]
        prev.push(setLines(item.current, color, weight))
        return prev
      }, [])
      map.value.add([...polyline]) // 繪制線
      //創(chuàng)建右鍵菜單
      menuInstance.value = new ContextMenu(map.value)
      let loca = new Loca.Container({
          map:map.value,
      });
      window._loca = loca;

      // 圖例, 圖例可以實(shí)例化多個(gè)，使用定位來設(shè)置位置
      let lengend = new Loca.Legend({
          loca: loca,
          title: {
              label: '管道類型',
              fontColor: 'rgba(255,255,255,1)',
              fontSize: '16px'
          },
          style: {
              backgroundColor: 'rgba(255,255,255,0.2)',
              left: '20px',
              bottom: '40px',
              fontSize: '12px'
          },
          dataMap: [
              { label: '省級(jí)管道', color: headColors[1] },
              { label: '縣級(jí)管道', color: headColors[0] },
          ],
      });

      //修改圖例排列方式
      document.getElementsByClassName("amap-loca loca-controls")[0].setAttribute('id', 'testid')
        var lis = document.querySelectorAll("#testid li");
        for (var i = 0; i < lis.length; i++) {
          console.log(lis[i]);
          lis[i].setAttribute("class", 'test'
          );
      }
    })
    .catch((e) => {
      console.log('error', e)
    })
}
onMounted(() => {
  initMap()
})

右鍵菜單

右鍵菜單， 右鍵菜單這里官方給我們的示例是使用一個(gè) 函數(shù) 進(jìn)行實(shí)例化，里面使用了 this， 所以這個(gè)我單獨(dú)拿出來，首先我們看一下官方的 demo

• 這里使用了一個(gè)函數(shù)，但這個(gè)函數(shù)還不是類，但是他卻在里面使用了this，實(shí)話來講，這種寫法確實(shí)不是很優(yōu)秀，可擴(kuò)展性很差，不夠健壯，但沒辦法，誰讓我們用了人家的東西呢是吧， 在 vue3 中這么用就不可以了，首先 vue3 里面使用 this 就不是官方建議的， 另外這里面還修改了函數(shù)原型上的方法，其實(shí)我得代碼里面一共有兩種右鍵菜單，如下：

一種是在指定點(diǎn)位上打開，另一種是在非點(diǎn)位的空白處打開，指定點(diǎn)位處打開的其實(shí)叫信息窗體，只不過是通過右鍵的方式觸發(fā)，那個(gè)沒有上面這個(gè)右鍵菜單麻煩。

• 首先來說 this 問題， 這里的 this 實(shí)際上就是把我們的實(shí)例化對(duì)象掛載到上面而已，vue3 中沒辦法像 vue2 那樣使用 this， 但也提供給我們了 api 來獲取當(dāng)前組件的實(shí)例化對(duì)象， 然后我沒用使用函數(shù)， 使用了一個(gè)類，類構(gòu)造這個(gè)方法， 模版也不適用字符串模版，因?yàn)檫@里字符串模版的事件綁定寫死了，我們使用 DOM 來動(dòng)態(tài)綁定事件，代碼如下：

const { ctx } = getCurrentInstance()
const _this = ctx
//自定義菜單類
class ContextMenu {
  constructor(map) {
    var me = _this
    //地圖中添加鼠標(biāo)工具M(jìn)ouseTool插件
    _this.mouseTool = new AMap.value.MouseTool(map)
    _this.contextMenuPositon = null
    const fragment = document.createElement('div') // 使用 DOM 方式, 方便添加事件
    fragment.className = 'info context_menu'
    const p = document.createElement('p')
    p.addEventListener('click', this.delMarkerMenu)
    p.textContent = '移除上次選中信息'
    fragment.appendChild(p)
    //通過content自定義右鍵菜單內(nèi)容
    _this.contextMenu = new AMap.value.ContextMenu({
      isCustom: true,
      content: fragment,
    })
    //地圖綁定鼠標(biāo)右擊事件——彈出右鍵菜單
    map.on('rightclick', function (e) {
      me.contextMenu.open(map, e.lnglat)
      me.contextMenuPositon = e.lnglat //右鍵菜單位置
    })
  }
  delMarkerMenu() {
    // 右鍵菜單上次選中點(diǎn)的信息
    clearPoint()
    _this.mouseTool.close()
    _this.contextMenu.close()
  }
}

完整代碼

• 這里的業(yè)務(wù)邏輯還不完善， 輸入部分的交互邏輯沒有完成， 這個(gè)文件直接引入自己的項(xiàng)目，安裝一下上面說過的依賴， 就可以使用，不過這里數(shù)據(jù)源需要自己根據(jù)自己的數(shù)據(jù)來構(gòu)造就可以了，我引入的事 data 中的一組假數(shù)據(jù)，在這里給大家兩組看一下

export const coordData = [
  {
    name: '黑龍江',
    position: [127, 47],
    pointData: {
      out: 100,
      provide: 10,
    },
    line: [
      {
        current: [
          [127, 47],
          [126, 43],
        ],
        type: 1,
      },
    ],
  },
  {
    name: '吉林',
    position: [126, 43],
    pointData: {
      out: 120,
      provide: 11,
    },
    line: [
      {
        current: [
          [126, 43],
          [113, 41],
        ],
        type: 1,
      },
    ],
  },
 ]

• 后面我會(huì)把業(yè)務(wù)邏輯抽離到 pinia 中， 并且完善ts類型， 大家對(duì)哪一部分有疑問或者更好的解決方案可以留言一起學(xué)習(xí)~

（學(xué)習(xí)視頻分享：vuejs入門教程、編程基礎(chǔ)視頻）

? ??? vue3?? Amap API? ???? ??? ?? ???? ?????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!