高德地图在Vue中的使用

在前端开发中，有时候会遇到集成地图功能的需求，目前主流的前端地图框架有openLayer、leaflet、cesium以及国内的高德地图、百度地图等，虽说可供选择的挺多，但是具体使用哪一个还是得看项目需求，在此记录一下高德地图的使用过程。

使用前准备

创建应用

进入高德开放平台，点击右上角控制台，点击应用管理下的我的应用，去创建一个自己的应用，后面会用到该应用的key和安全秘钥。

安装依赖

使用npm装高德地图JS API的依赖包

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

项目中使用

创建地图容器

在需要使用地图的vue页面中创建一个地图容器

<template>
  <div id="map-box"></div>
</template>

地图元素后面会渲染到该容器内，因此可以先通过css设置好该容器的大小和其他样式。

引入JS API Loader

在vue页面中引入高德地图的JS API Loader

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

创建初始化地图方法

调用AMapLoader.load方法创建地图，地图的更多配置参数参考高德开放平台相关文档

const initMap = () => {
  window._AMapSecurityConfig = {
    securityJsCode: '创建的应用的安全秘钥'
  }
  AMapLoader.load({
    key: '创建的应用的key',
    version: '2.1Beta' //使用的地图JS API的版本
  })
    .then((AMap) => {
      map = new AMap.Map('map-box', {
        viewMode: '3D',  //地图模式3D或2D
        zoom: 9.4,  //地图缩放等级
        center: [104.065861, 30.657401],  //地图中心点坐标（经纬度）
        pitch: 45,  //地图倾斜角度
        wallColor: '#374F71', //建筑物侧面颜色
        roofColor: '#4C6E9B', //建筑物顶面颜色
        mapStyle: 'amap://styles/blue'  //地图样式
      })
    })
    .catch((e) => {
      console.log(e)
    })
}

调用与销毁

在页面挂载完成后调用初始化地图的方法，并在页面销毁前销毁地图

onMounted(() => {
  initMap()
})
onUnmounted(() => {
  map?.destroy()
})

完整代码

<template>
  <div class="mal-container">
    <div id="map-box"></div>
  </div>
</template>

<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, onUnmounted } from 'vue'
let map = null
onMounted(() => {
  initMap()
})
onUnmounted(() => {
  map?.destroy()
})
const initMap = () => {
  window._AMapSecurityConfig = {
    securityJsCode: '创建的应用的安全秘钥'
  }
  AMapLoader.load({
    key: '创建的应用的key',
    version: '2.1Beta' //使用的地图JS API的版本
  })
    .then((AMap) => {
      map = new AMap.Map('map-box', {
        viewMode: '3D',  //地图模式3D或2D
        zoom: 9.4,  //地图缩放等级
        center: [104.065861, 30.657401],  //地图中心点坐标（经纬度）
        pitch: 45,  //地图倾斜角度
        wallColor: '#374F71', //建筑物侧面颜色
        roofColor: '#4C6E9B', //建筑物顶面颜色
        mapStyle: 'amap://styles/blue'  //地图样式
      })
    })
    .catch((e) => {
      console.log(e)
    })
}
</script>
<style scoped>
.mal-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  color: #f00;
  font-size: vh(40);
}
#map-box {
  width: 100%;
  height: 100%;
}
</style>

大家在开发中喜欢用什么地图框架，欢迎在评论区交流！