基于腾讯地图+Ant-Design-Vue封装省市区联动查询组件

一、腾讯地图key申请

附上教程：腾讯地图key申请

二、在项目加载JS API

在VUE项目的pubilc文件夹下的index.html中加入

<script src="https://map.qq.com/api/gljs?v=1.exp&key=你申请的key"></script>

三、组件封装

1、在src>components文件夹下新建MyMap.vue

2、代码如下：

<template><div><div class="c-tmap-select"><a-selectv-model="provinceValue"placeholder="省"class="c-amap_select"><a-select-optionv-for="item in provinceOptions":key="item.id":value="item.fullname"@click="provinceChange(item)">{{ item.fullname }}</a-select-option></a-select><a-selectv-model="cityValue"placeholder="市"class="c-amap_select"><a-select-optionv-for="item in cityOptions":key="item.id":value="item.fullname"@click="cityChange(item)">{{ item.fullname }}</a-select-option></a-select><a-selectv-model="areaValue"placeholder="区"class="c-amap_select"><a-select-optionv-for="item in areaOptions":key="item.id":value="item.fullname"@click="areaChange(item)">{{ item.fullname }}</a-select-option></a-select></div><slot></slot><div id="container" style="width:800px;height:400px;"><divclass="c-tmap-input"@click.stop="()=>{}"@touch.stop="()=>{}"@dblclick.stop="()=>{}"><a-auto-completev-model="address"date-source="dataSource"placeholder="请输入详细地址"class="c-tmap-input_auto"@change="handleChange"><template slot="dataSource"><a-select-optionv-for="item in dataSource":key="item.id":title="item.title"@click="selctLocation(item)">{{ item.title }}--{{ item.address }}</a-select-option></template></a-auto-complete></div></div></div>
</template><script>
export default {name: 'MyMap',props: {// 省provinceProp: {type: String,default: ''},// 市cityProp: {type: String,default: ''},// 区areaProp: {type: String,default: ''},// 经度longitude: {type: String,default: ''},// 纬度latitude: {type: String,default: ''}},data() {return {markerLayer: {},map: {},lng: 116.40717, // 经度lat: 39.90469, // 纬度,address: '', // 详细地址dataSource: [], // 详细地址输入提示provinceValue: '', // 省cityValue: '', // 市areaValue: '', // 区provinceOptions: [], // 省级行政区选择cityOptions: [], // 市级行政区选择areaOptions: [], // 县区行政区选择provinces: [], // 省级数据cities: [], //  市级数据areas: [] // 地区数据}},async mounted() {this.init()this.markerLayer = new window.TMap.MultiMarker({})this.initMap()this.addImgMarker(new window.TMap.LatLng(this.lat, this.lng))await this.getDistrict()},methods: {// 省市区数据初始化init() {if (this.provinceProp) {this.provinceValue = this.provinceProp}if (this.cityProp) {this.cityValue = this.cityProp}if (this.areaProp) {this.areaValue = this.areaProp}},// 重置市、区、详细地址数据resetCityAndareaData() {this.cityValue = ''this.areaValue = ''this.address = ''this.cityOptions = []this.areaOptions = []},// 重置区、详细地址数据resetareaData() {this.areaValue = ''this.address = ''this.areaOptions = []},// 选择省级地区触发provinceChange(item) {this.resetCityAndareaData()// console.log(item.cidx)if (item && item.cidx) {this.cityOptions = this.cities.slice(item.cidx[0], item.cidx[1] + 1)this.getLocation(item.location)}this.provinceValue = item.fullnamethis.chooseData()// console.log(item.cidx[0], item.cidx[1] + 1)},// 选择城市触发cityChange(item) {this.resetareaData()// console.log(item)if (item && item.cidx) {this.areaOptions = this.areas.slice(item.cidx[0], item.cidx[1] + 1)this.getLocation(item.location)}this.cityValue = item.fullname// console.log(item.cidx[0], item.cidx[1] + 1)// console.log(this.areaOptions)this.chooseData()},// 选择地区触发areaChange(item) {this.areaValue = item.fullnamethis.chooseData()if (item) {this.getLocation(item.location)}},chooseData() {// console.log(this.provinceValue, this.cityValue, this.areaValue, this.address)const data = {provinceValue: this.provinceValue,cityValue: this.cityValue,areaValue: this.areaValue,address: this.address}this.$emit('change', data)},// 获取全部行政区划数据getDistrict() {this.$store.dispatch('map/getDistrict').then(res => {this.district = res.resultthis.provinces = res.result[0]this.provinceOptions = res.result[0]this.cities = res.result[1]this.areas = res.result[2]// console.log(this.district)})},selctLocation(item) {// console.log(item)this.getLocation(item.location)this.address = item.title + '-' + item.addressthis.chooseData()},// 获取当前位置，并在地图中显示getLocation(location) {// console.log('location', location)this.lat = location.latthis.lng = location.lngthis.map.setCenter(new window.TMap.LatLng(this.lat, this.lng))this.addImgMarker(new window.TMap.LatLng(this.lat, this.lng))},// 选择搜索handleChange() {const that = thisthis.$store.dispatch('map/getSuggestion', {region: this.cityValue || '',keyword: this.address,}).then(res => {that.dataSource = res.data})},// 地图初始化initMap() {// console.log('window', window)const that = this// 定义地图中心点坐标// eslint-disable-next-line no-undefconst center = new TMap.LatLng(this.lat, this.lng)// 定义map变量，调用 TMap.Map() 构造函数创建地图// eslint-disable-next-line no-undefconst map = new TMap.Map(document.getElementById('container'), {center: center, // 设置地图中心点坐标zoom: 15, // 设置地图缩放级别pitch: 43.5, // 设置俯仰角rotation: 45, // 设置地图旋转角度})this.map = mapmap.on('click', (e) => {this.markerLayer.setGeometries([])const position = e.latLng// console.log(e)// console.log(position.lat.toFixed(6))this.$store.dispatch('map/getClickLocation', {lat: position.lat.toFixed(6),lng: position.lng.toFixed(6)}).then(res => {// console.log(res)that.provinceValue = res.result.address_component.provincethat.cityValue = res.result.address_component.citythat.areaValue = res.result.address_component.districtthat.address = res.result.formatted_addresses.recommendthat.chooseData()})that.addImgMarker(position)})},// 在地图上添加点标识addImgMarker(data) {// console.log(data, 'data')this.markerLayer = new window.TMap.MultiMarker({map: this.map,// 样式定义styles: {// 创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）myStyle: new window.TMap.MarkerStyle({width: 25, // 点标记样式宽度（像素）height: 35, // 点标记样式高度（像素）anchor: { x: 16, y: 32 },}),},// 点标记数据数组geometries: [{id: '1', // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此idstyleId: 'myStyle', // 指定样式idposition: data, // 点标记坐标位置},],})},},}
</script><style lang="scss">
.c-tmap-select {margin: 10px;
}
.c-tmap-input {position: absolute;z-index: 9999;top: 10px;right: 85px;
}
.c-tmap-input_auto {width: 300px;
}
</style>

四、效果

基于腾讯地图+Ant-Design-Vue封装省市区联动查询组件相关推荐

Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...
基于 Vue3.0 和 Ant Design Vue ,高颜值管理后台UI框架vue-vben-admin运行
简介 Vue Vben Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案,也可用于学习参考. Github地址 ...
vue3+ant design vue+ts实战【ant-design-vue组件库引入】
vue3 UI组件库 Ant Design of Vue Ant Design Vue
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
前言写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值简化了渲染的子组 ...
ABP vNext 对接 Ant Design Vue 实现分页查询
本文内容 ABP vNext中的分页查询 STable组件中的分页查询实现参数转换层最终对接效果在上一篇博客中,博主和大家分享了如何在 EF Core 中实现多租户架构.在这一过程中,博主主 ...
vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...
Vue vben admin - 新鲜出炉的高颜值管理后台UI框架，基于 Vue3 和 Ant Design Vue
基于Vue3.0 / Vite / Ant Design 等火热开源项目构建,新鲜出炉,值得关注. 关于 Vue vben admin Vue Vben Admin 是一个基于 Vue3.0.Vite ...
Artiely Vue Admin - 基于蚂蚁金服Ant Design构建的高颜值开源管理后台UI框架
继承 Ant Design 专业美观的优点,支持PC/手机/平板的响应式布局的优秀后台管理系统 UI 框架. 关于 Artiely Vue Admin Ant Design 是阿里巴巴蚂蚁金服团队出品 ...

基于腾讯地图+Ant-Design-Vue封装省市区联动查询组件

一、腾讯地图key申请

二、在项目加载JS API

三、组件封装

四、效果

基于腾讯地图+Ant-Design-Vue封装省市区联动查询组件相关推荐

最新文章

热门文章