vue3 简单封装GoogleMap组件

关于支持vue3的GoogleMap，暂时推荐两种
vue3-google-map
vue3 google maps
大家有较好的推荐欢迎交流
我这里选用的第二种

npm install -S @fawmi/vue-google-maps

然后再main中引入

// google-map
import VueGoogleMaps from '@fawmi/vue-google-maps'
app.use(VueGoogleMaps, {load: {key: 你的Google map key// language: 'de',}
})

新建一个xxx.vue的模块

 <div id="googleMap" class="mapCont"><GMapMap ref="mapRef" :center="center" :zoom="15"><GMapMarker v-for="(item, index) in markerOptions" :key="index" :position="item.position" /></GMapMap></div>

GMapMap 为地图，GMapMarker为标记，其他需求看文档就好了

const center = reactive({ lat: 51.093048, lng: 6.84212 })
const mapKey = settings.googleMapKey
const markerOptions = reactive([{position: {lat: 51.093048,lng: 6.84212}}
])

设置地图中心和坐标点
在旁边随便加个搜索框，搜索并设为中心，搜索这里是使用的geocode

const reqSearch = () => {axios.get('https://maps.googleapis.com/maps/api/geocode/json?address=' + data.searchVal + '&key=' + mapKey).then((res) => {console.log('res', res)if (res.data.status == 'OK') {center.lat = res.data.results[0].geometry.location.latcenter.lng = res.data.results[0].geometry.location.lngmarkerOptions.splice(0, 1, { position: { lat: center.lat, lng: center.lng } })axios.get(`https://maps.googleapis.com/maps/api/geocode/json?&key=${mapKey}&latlng=${center.lat},${center.lng}`).then((res) => {console.log(res)if (res.data.status == 'OK') {addressParse.lat = res.data.results[0].geometry.location.lataddressParse.lng = res.data.results[0].geometry.location.lnglet sourceData = res.data.results.sort((a, b) => {return b.address_components.length - a.address_components.length})sourceData = sourceData[0].address_componentsaddressParse.address = res.data.results[0].formatted_addresssourceData.forEach((item) => {if (item.types[0] == 'country') {addressParse.nation = item.long_name}if (item.types[0] == 'administrative_area_level_1') {addressParse.Province = item.long_name}if (item.types[0] == 'administrative_area_level_2' || item.types[0] == 'locality') {addressParse.city = item.long_name}if (item.types[0] == 'postal_code') {addressParse.postal_code = item.long_name}})console.log(addressParse)} else {ElMessage.error('地址详情查询失败')}})} else {ElMessage.error('查询失败')}}).catch((err) => {console.log('err', err)ElMessage.error('查询失败')})
}

我这里首先通过地址搜索，得到经纬度，然后通过经纬度取货去更详细的地址信息，英语不好文档看的太折磨了，大家有什么好办法欢迎交流

这是我最终需要的一些值

const addressParse = reactive({nation: '',Province: '',city: '',address: '',postal_code: '',lat: '',lng: ''
})

在父组件使用

 <googleMap ref="searchAddRef" @getLocal="getLocal" style="height: 100%; width: 100%" />
import googleMap from '@c/googleMap/googleMap'

因为这里我用的是setup语法糖，需要来设置emit

const emit = defineEmits(['getLocal'])
emit('getLocal', addressParse)

父组件接收

const getLocal = (addressParse) => {console.log(addressParse)
}

完事（其实踩了好多坑）

vue3 简单封装GoogleMap组件相关推荐

vue2+webpack/vue3+vite 封装svg组件总结笔记
一.vue2+webpack 1.npm安装依赖包 npm i svg-sprite-loader package.json "svg-sprite-loader": " ...
vue3+TypeScript封装echarts5组件
https://blog.csdn.net/qq_38330707/article/details/111497853 有用mark 等抽时间写个vue+TS+echarts5.0的组件文章写个大概 ...
vue3使用echarts并封装echarts组件
vue3使用echarts并封装echarts组件前言: 一.安装并导入echart 1.npm下载包 2.配置echarts 二.使用echarts 三.封装echarts为组件前言: 本文使用 ...
利用递归组件实现一个简单的树组件（vue3）
1. 简言闲来无事不从容,睡觉东窗日已红. 万物静观皆自得,四时佳兴与认同. 最近学习vue3组件的时候实现了一个简单的树组件.话不多说,直接上代码. 2.效果这个数组件实现了展开.选中和选择三个 ...
vue3中，echarts使用（四）02——柱状图之堆叠条形图-定制化封装切换tag标签组件封装title组件
vue3中,echarts使用(四)02--柱状图之堆叠条形图-定制化 & 封装切换tag标签组件 & 封装title组件效果代码 1.主页面 index.vue <temp ...
Vue3VideoPlay+vue3+ts封装一个视频播放组件
vue3+ts封装一个视频播放组件基于Vue3VideoPlay 做了常用的配置,复制即用! 官方文档https://codelife.cc/vue3-video-play/ 安装 npm安装: n ...
封装 vue 组件的过程记录
在我们使用vue的开发过程中总会遇到这样的场景,封装自己的业务组件. 封装页面组件前要考虑几个问题: 1.该业务组件的使用场景 2.在什么条件下展示一些什么数据,数据类型是什么样的,及长度颜色等 3. ...
Android APP更新下载工具类——简单封装DownloadManager
几乎所有APP都包含了检查更新功能,更新下载功能的实现方式常用的有两种:1.使用App网络框架的文件下载请求:2.使用自带的DownloadManager类:本文介绍第二种,简单封装一下Downloa ...
学会用taro封装一个组件
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣学习前端知识前言大家好我是歌谣今天要说得是用taro封装一个组件核心是学会弹性布局直接上代码组件部分子组件 import ...

vue3 简单封装GoogleMap组件

vue3 简单封装GoogleMap组件相关推荐

最新文章

热门文章