在vue3的index.html
使用动态注入地址名和key
<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(开发环境)
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中使用代理地址
server: {
open: true,
// port: 3000,
proxy: {
'^/maps': {
target: 'http://webapi.amap.com/',
changeOrigin: true
}
}
},在对应的页面中引入高德地图
<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>
封装的高德方法
/**
*? 加载地图
*/
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
}