vue3开发高德地图

在vue3的index.html

使用动态注入地址名和key

javascript 复制代码

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="%VITE_MAP_ULR%/maps?v=1.4.6&key=%VITE_MAP_KEY%"></script>
    <script type="text/javascript" src="%VITE_MAP_ULR%/maps?v=1.4.15&plugin=AMap.Driving&plugin=AMap.ControlBar&plugin=AMap.MapType,AMap.PolyEditor,AMap.CircleEditor,AMap.HeatMap&key=%VITE_MAP_KEY%"></script>
    <script type="text/javascript" src="%VITE_MAP_ULR%/maps?v=1.4.6&plugin=AMap.DistrictSearch&key=%VITE_MAP_KEY%"></script>
    <script type="text/javascript" src="%VITE_MAP_ULR%/maps?v=1.4.6&plugin=AMap.MouseTool&key=%VITE_MAP_KEY%"></script>
    <script type="text/javascript" src="%VITE_MAP_ULR%/maps?v=1.4.15&plugin=AMap.ControlBar&key=%VITE_MAP_KEY%"></script>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

在对应的开发环境中注入对的地址和key,比如在.env.development(开发环境)

javascript 复制代码

VITE_NODE_ENV='development'
# 后端链接地址
VITE_APP_URL='http://www.taobao.com'
# 如果使用了CJS,不知道报错日志，脚本显示报错日志    --vite官网/指引/故障排除/CJS
VITE_CJS_TRACE=true
# 忽略CJS警告
# VITE_CJS_IGNORE_WARNING=true
# 高德API
VITE_MAP_ULR=''
# 高德地图key
VITE_MAP_KEY=''

因为请求高德会报跨域，所以在vite中使用代理地址

javascript 复制代码

server: {
      open: true,
      // port: 3000,
      proxy: {
        '^/maps': {
          target: 'http://webapi.amap.com/',
          changeOrigin: true
        }
      }
    },

在对应的页面中引入高德地图

javascript 复制代码

<template>
  <div class="home">
    <div id="container"></div>
    <div id="map_move">
      <div class="mapzoom" title="拖动移动">
        <svg-icon name="moveMap"></svg-icon>
      </div>
      <div class="mapzoom" title="画多边形" @click="createPolygon">
        <svg-icon name="polygon"></svg-icon>
      </div>
      <div class="mapzoom" title="画折线">
        <svg-icon name="brokenLine"></svg-icon>
      </div>
    </div>
    <div id="mapzoom">
      <div class="mapzoom" title="缩小" @click="mapMinZoom">
        <el-icon><ZoomOut /></el-icon>
      </div>
      <div class="mapzoom" title="放大" @click="mapMaxZoom">
        <el-icon><ZoomIn /></el-icon>
      </div>
      <div class="mapzoom" title="初始位置" @click="mapInitZoom">
        <el-icon><Location /></el-icon>
      </div>
      <div class="mapzoom" title="暗黑模式" @click="mapSetStyle">
        <el-icon>
          <Sunny v-if="data.dark" />
          <Moon v-else />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { mapInit, addDrawingManager } from '@/utils/mapSetting'
const mapConfig = ref({
  location: [113.000321, 23.033159],
  zoom: 11,
  viewMode: '3D'
})
const data = reactive({
  map: '',
  dark: '',
  polyEditor: ''
})
onMounted(() => {
  init()
  addDrawTool()
})

const init = () => {
  data.map = mapInit(mapConfig.value, 'container')
}
// 缩小
const mapMinZoom = () => {
  data.map.setZoom(data.map.getZoom() - 1)
}
// 放大
const mapMaxZoom = () => {
  data.map.setZoom(data.map.getZoom() + 1)
}
// 回到最初的中心点
const mapInitZoom = () => {
  data.map.setZoomAndCenter(mapConfig.value.zoom, mapConfig.value.location)
}
// 场景切换
const mapSetStyle = () => {
  data.dark = !data.dark
  let styleName = 'amap://styles/'
  if (data.dark) {
    styleName = styleName + 'dark'
    data.map.setMapStyle(styleName)
  } else {
    styleName = styleName + 'normal'
    data.map.setMapStyle(styleName)
  }
}
const addDrawTool = () => {
  const styleOption = {
    strokeColor: "#FF33FF",
    strokeOpacity: 0.2,
    fillColor: "#1791fc",
    fillOpacity: 0.4,
    strokeWeight: 3
  }
  data.polyEditor = addDrawingManager()
}
// 开始画图
const createPolygon = () => {
  data.polyEditor.close()
  data.polyEditor.setTarget()
  data.polyEditor.open()
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
}
#container {
  width: 100%;
  height: 100vh;
}
#mapzoom {
  position: absolute;
  top: 120px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.mapzoom {
  width: 25px;
  height: 25px;
  color: #409eff;
  background-color: #fff;
  line-height: 25px;
  text-align: center;
  border-radius: 2px;
  margin-top: 5px;
  border: 1px solid #dfdfdf;
  cursor: pointer;
}
#map_move{
  position: absolute;
  top: 120px;
  right: 300px;
  display: flex;
  align-items: flex-end;
}
</style>

封装的高德方法

javascript 复制代码

/**
 *? 加载地图
 */
import { reactive } from 'vue'
const data = reactive({
  map: '',
  polyEditor: '',
  mouseTool: '',
  polygon: '', // 覆盖物
  location: {
    lng: '',
    lat: ''
  },
  path: []
})
export const mapInit = (mapConfig, dom) => {
  data.map = new AMap.Map(dom, {
    viewMode: mapConfig.viewMode, // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
    zoom: mapConfig.zoom, // 初始化地图层级
    center: mapConfig.location, // 初始化地图中心点
  })
  data.map.on("click", showInfoClick)
  return data.map
}


/**
 *@description 获取点击的经纬度
 */
 export function showInfoClick(e) {
  console.log('e', e)
  data.location.lng = e.lnglat.getLng() //记录最后一次点击的经纬度
  data.location.lat = e.lnglat.getLat()
}

/**
 *! 添加画图工具
 */
 export const addDrawingManager = () => {
  if (data.polyEditor) {//判断存在多边形围栏就先取消编辑并清除之前画的多边形围栏
    data.polyEditor.close()
  }
  data.polyEditor = new AMap.PolygonEditor(data.map)
  data.polyEditor.on('add', function (attr) {
    console.log(data);
    let polygon = attr.target;
    data.polyEditor.addAdsorbPolygons(polygon)
    polygon.on('dblclick', () => {
      data.polyEditor.setTarget(polygon);
      data.polyEditor.open()
    })
  })
  return data.polyEditor
 }