Vue基于高德地图API封装一个地图组件

ops/2025/3/19 19:29:39/
一、参考资料
 

高德开放平台 | 高德地图API (amap.com)
 

二、安装及配置
 

pnpm i @vuemap/vue-amap --save

man.ts      密钥及安全密钥需要自己到高德地图开放平台控制台获取.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import vant from 'vant'
import 'vant/lib/index.css'
import VueAMap, { initAMapApiLoader } from '@vuemap/vue-amap'
import '@vuemap/vue-amap/dist/style.css'import * as echarts from 'echarts'initAMapApiLoader({key: '841d5250cb7f61adda2ee70c1e3abdaf',securityJsCode: 'd122cbf5a33de34356661cf0cef1a553', // 新版key需要配合安全密钥使用plugins: [// 定位空间,用来获取和展示用户主机所在的经纬度位置'AMap.Geolocation',// 输入提示插件'AMap.Autocomplete',// POI搜索插件'AMap.PlaceSearch',// 右下角缩略图插件,比例尺'AMap.Scale',// 地图鹰眼插件'AMap.OverView',// 地图工具条'AMap.ToolBar',// 类别切换空间,实现默认图层与卫星图,实施交通层之间切换的控制'AMap.MapType',// 编辑 折线多边形'AMap.PolyEditor','AMap.CircleEditor',// 地图编码'AMap.Geocoder']
})const app = createApp(App)
//全局挂载echarts
app.config.globalProperties.$echarts = echarts
app.use(router)
app.use(ElementPlus)
app.use(VueAMap)
app.use(vant)
app.mount('#app')
三、源码分享
 

1、map.vue

<template><el-dialog v-model="showMapDialog"><template #default><div id="container"><AmapSelect v-model="locationData" @callback="getMapInfo" /></div></template></el-dialog>
</template><script lang="ts" setup>
import { ref, nextTick, defineEmits } from 'vue'
// import { ElMessage } from 'element-plus';
import AmapSelect from './AmapSelect.vue'const props = defineProps({title: {type: String,default: '选择位置'},center: {type: Array,default: () => [115.846381, 28.659961]}
})const locationData:any = ref([])
const showMapDialog = ref(false)
const emit = defineEmits(['submit'])function getMapInfo(info: any) {// console.log(info,'info'); 可拿到点击的地址 以及经纬度  可用于做回显等其他操作// debuggeremit('submit', {address: info.address,lnglat: info.lnglat})
}const openForm = () => {showMapDialog.value = truenextTick(() => {locationData.value=props.center;})
}//提交// const okModal = async () => {}//导出方法defineExpose({openForm
})
</script><style lang="scss" scoped>
#container {height: 400px;
}.el-dialog__body {padding: 0 !important;
}
</style>

2、AmapSelect.vue

<template><el-amap :zoom="zoom" @init="init"><el-amap-search-box:visible="visible"@select="selectChange"@choose="handleChange"placeholder="请输入"/></el-amap>
</template><script>
export default {name: 'AmapSelect',emits: ['callback'],props: {visible: {type: Boolean,default: true},modelValue: {type: Array,default: []}},data() {return {zoom: 12,map: null,geocoder: new AMap.Geocoder({}),activeAddress: null,}},watch: {modelValue: {handler(val, oldVal) {if (val) {// let lnglat = val[1].split(',')this.onClickMap({lnglat: { lng: val[0], lat: val[1] }})}},deep: true}},mounted() {},methods: {init(map) {this.map = mapmap.on('click', this.onClickMap.bind(this))},selectChange({ poi }) {if (poi.location) {let { lng, lat } = poi.locationthis.onClickMap({lnglat: { lng, lat }},() => {this.map.setCenter([lng, lat])})}},handleChange(e) {console.log('handleChange: ', e)}, // 点击地图onClickMap(e, callback) {let lnglat = [e.lnglat.lng, e.lnglat.lat]var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, 0)})this.geocoder.getAddress(lnglat, (status, result) => {if (status === 'complete' && result.info === 'OK') {// result为对应的地理位置详细信息var province = result.regeocode.addressComponent.province //省var city = result.regeocode.addressComponent.city //市var district = result.regeocode.addressComponent.district //县区var township = result.regeocode.addressComponent.township //镇、街道var region = province + city + district + township //返回所属区域let addressName = result.regeocode.formattedAddress.replace(region,'')let address = ''if (!addressName) {address = regionaddressName = region} else {address = result.regeocode.formattedAddress}let obj = {lnglat: lnglat.toString(),address: address,addressName: addressName}infoWindow.setContent(this.createdInfoWindowContent(obj))infoWindow.open(this.map, lnglat) // 更新数据callback && callback()}})this.map.setCenter(lnglat)}, // 窗口信息createdInfoWindowContent(data) {var infoWindowContent ='<style>.btn {display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle;' +'-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent;' +'transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;' +'background-color: transparent; background-image: none; color: #25A5F7; border-color: #25A5F7; padding: .25rem .5rem; line-height: 1.5;' +'border-radius: 1rem;  -webkit-appearance: button; cursor:pointer;}</style>' +'<div className="custom-infowindow input-card">' +'<label  class="input-item-text">' +data.addressName +'</label>' +'<div class="input-item">' +'<div class="input-item-prepend">' +'<span style="color:grey">' +data.address +'</span>' +'</div>' +'</div>' + // 为 infowindow 添加自定义事件'<input id="lnglat2container" type="button" class="btn" value="选择地址" onclick="setLngLat()"/>' +'</div>'// debugger;window.setLngLat = () => {this.$emit('update:modelValue', [data.address, data.lnglat])this.$emit('callback', data)}return infoWindowContent}}
}
</script><style lang="scss" scoped></style>
四、效果展示

点击窗口信息的选择地址可拿到点击位置的信息然后再做后续操作!!!主要还是参考高德地图API的官方文档.


http://www.ppmy.cn/ops/12228.html

相关文章

智慧安防视频监控EasyCVR视频汇聚平台无法自动播放视频的原因排查与解决

国标GB28181协议EasyCVR安防视频监控平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力&#xff0c;平台支持7*24小时实时高清视频监控&#xff0c;能同时播放多路监控视频流…

appium相关的知识

>adb shell dumpsys window | findstr mCurrentFocus adb devices # 实例化字典 desired_caps = dict() desired_caps[platformName] = Android desired_caps[platformVersion] = 9 # devices desired_caps[deviceName] = emulator-5554 # 包名 desired_caps[appPackage] …

论文笔记:How Can Large Language Models Understand Spatial-Temporal Data?

arxiv 202401 1 intro LLM在NLP和CV领域表现出色&#xff0c;但将它们应用于时空预测任务仍然面临挑战&#xff0c;主要问题包括&#xff1a; 数据不匹配 传统的LLMs设计用于处理序列文本数据&#xff0c;而时空数据具有复杂的结构和动态性&#xff0c;这两者之间存在显著差异…

面试二十、BST二叉排序树

静态查找表&#xff1a; 当有序表是静态的&#xff0c;即其内容在创建后不再发生变化&#xff0c;适合使用顺序表作为存储结构。顺序表通过数组实现&#xff0c;可以提供常数时间的随机访问&#xff0c;因此在静态情况下&#xff0c;适合顺序表存储&#xff0c;这样可以简化数据…

uniapp同步开发h5+小程序双平台踩坑记录

最近做项目的需求是先发布h5&#xff0c;后续再开发上线微信小程序版&#xff0c;自然我选择了uniapp多平台打包&#xff0c;过程中也踩了一些坑。本篇文章记录了使用uniapp开发h5的注意事项&#xff0c;及打包成小程序需要兼容改动的内容。 1.需要在pages.json注册页面路由 在…

【复现代码——环境配置】

目录 一、复现代码举例二、创建环境——选择一个Python版本2.1 创建基本环境2.1.1 基于AutoDL2.1.2 基于PyCharm 2.2 终端激活环境2.3 退出环境2.4 删除环境 三、PyTorch安装3.1 查看cuda3.2 安装PyTorch 四、其他依赖安装4.1 tensorboardX4.2 matplotlib4.3 medpy4.4 visdom4.…

Llama改进之——均方根层归一化RMSNorm

引言 在学习完GPT2之后&#xff0c;从本文开始进入Llama模型系列。 本文介绍Llama模型的改进之RMSNorm(均方根层归一化)。它是由Root Mean Square Layer Normalization论文提出来的&#xff0c;可以参阅其论文笔记1。 LayerNorm 层归一化(LayerNorm)对Transformer等模型来说…

Ventus(承影):基于RISC V的开源GPGPU

Ventus&#xff08;承影&#xff09;&#xff1a;基于RVV的开源GPGPU 清华大学集成电路学院dsp-lab的承影RVV GPGPU设计文档。 整体目标 提供一个开源的基于RVV的GPGPU实现方案&#xff0c;并给出软件映射方案、指令集&#xff08;支持的指令及特性、添加的自定义指令&#xf…