- Page effect
- Download and install map dependencies
"dependencies": {
"@element-plus/icons-vue": "1.1.4",
"@vuemap/vue-amap": "^1.1.3", // --------------- 地图依赖
"axios": "0.26.1",
"echarts": "5.3.2",
"element-plus": "2.1.8",
"file-saver": "2.0.5",
"fuse.js": "6.5.3",
"js-cookie": "3.0.1",
"jsencrypt": "3.2.1",
"nprogress": "0.2.0",
"vue": "3.2.31",
"vue-cropper": "1.0.3",
"vue-router": "4.0.14",
"vuex": "4.0.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "2.3.1",
"@vue/compiler-sfc": "3.2.31",
"@vuemap/unplugin-resolver": "^1.0.3", // --------------- 地图依赖
"sass": "1.50.0",
"unplugin-auto-import": "^0.7.1",
"unplugin-vue-components": "^0.19.5",
"vite": "2.6.14",
"vite-plugin-compression": "0.5.1",
"vite-plugin-svg-icons": "1.0.5",
"vite-plugin-vue-setup-extend": "0.4.0"
}
- Register and import in mian.js
import VueAMap from '@/components/aMap/aMap'
app.use(VueAMap)
- Encapsulate map component
js file content
import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap'
import '@vuemap/vue-amap/dist/style.css'
window._AMapSecurityConfig = {
securityJsCode: 'b2f50ad82bdd6c8a7aaf2bba746f1578',
}
initAMapApiLoader({
key: '80192ad1586347ee8733bab8ee4388a8', //备用测试key e1dedc6bdd765d46693986ff7ff969f4
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
// 需要使用的的插件列表,如比例尺'AMap.Scale'等
plugin: [
'AMap.Autocomplete', // 输入提示插件
'AMap.PlaceSearch', // POI搜索插件
'AMap.Scale', // 右下角缩略图插件 比例尺
'AMap.OverView', // 地图鹰眼插件
'AMap.ToolBar', // 地图工具条
'AMap.Geolocation', // 定位控件,用来获取和展示用户主机所在的经纬度位置
'AMap.Geocoder',
'AMap.MapType',
],
AMapUI: { // 是否加载 AMapUI,缺省不加载
"version": '1.1', // AMapUI 版本
"plugins": ['overlay/SimpleMarker'], // 需要加载的 AMapUI ui插件
},
})
// 捕获未知错误 并重载页面
window.addEventListener('error', (e) => {
console.log(e, 'error')
}, true)
export default VueAMap
index.vue page content
<template>
<div class="aMapMain">
<div v-if="isDisplayAMap">
<div class="aMap">
<el-amap ref="mapRef" :min-zoom="8" :max-zoom="22" :center="center" :zoom="zoom" @init="initMap">
<el-amap-search-box @select="selectPoi" @choose="selectPoi" v-if="isShowAMap"/>
<el-amap-marker :position="componentMarker.position" :content="componentMarker.content"/>
</el-amap>
</div>
<div class="aMapAddress">
<p>
<span>地址:</span>
<span>{
{ toParentsMapInfo.detailedAddress }}</span>
</p>
</div>
</div>
<div v-else class="isDisplayAMap">
<el-amap ref="mapRef" :min-zoom="8" :max-zoom="22" :center="center" :zoom="zoom" @init="initMap">
<el-amap-search-box @select="selectPoi" @choose="selectPoi" v-if="isShowAMap"/>
<el-amap-marker :position="componentMarker.position" :content="componentMarker.content"/>
</el-amap>
</div>
</div>
</template>
<script setup name="AMap">
import {Plus, Delete} from '@element-plus/icons-vue'
import {toRefs} from '@vueuse/shared'
import {reactive, ref} from '@vue/reactivity'
import {defineProps, getCurrentInstance} from '@vue/runtime-core'
const {proxy} = getCurrentInstance()
const props = defineProps({
toParentsMap: {
type: Object, // 父组件传来的默认数据
default: {}
},
isShowAMap: {
type: Boolean, // 控制是否展示搜索框
default: null
},
isDisplayAMap: {
type: Boolean, // 控制是否展示地图试图
default: true
},
})
const emit = defineEmits(['mapData'])
const zoom = ref(16)
const center = ref([
props.toParentsMap.lng || 113.887902,
props.toParentsMap.lat || 22.554732
])
const componentMarker = ref({
position: [
props.toParentsMap.lng || 113.887902,
props.toParentsMap.lat || 22.554732
],
visible: true,
draggable: false
})
const toParentsMapInfo = ref({})
/** 接受父组件传值进行赋值 初始化地图数据*/
function initMapInfo() {
console.log(center.value)
toParentsMapInfo.value = props.toParentsMap
}
/** 初始化地图*/
function initMap(e) {
console.log(props.isShowAMap)
}
/** 选取定位地图*/
function selectPoi(e) {
let poi = e.poi
if (poi.address.length > 0 && poi.location != undefined &&
poi.location != null && poi.location != '') {
let position = [e.poi.location.lng, e.poi.location.lat]
center.value = position
componentMarker.value.position = position
toParentsMapInfo.value = {
id: poi.id,
lng: poi.location.lng, //经度
lat: poi.location.lat, //纬度
districtCode: poi.adcode, //区编码
//address: poi.address, //地址
//district: poi.district, //省名称 市名称 区名称
//name: poi.name, //查询地址
province: '', //省地址
city: '', //市地址
zone: '', //区地址
detailedAddress: '' //详细地址
}
let reg = /.+?(省|市|自治区|自治州|盟|旗|县|区)/g // 截取地图地址
let detailedAddress = poi.district + poi.address + poi.name
let districtList = detailedAddress.match(reg)
if (districtList.length < 3) {
toParentsMapInfo.value.city = districtList[0]
toParentsMapInfo.value.zone = districtList[1]
} else {
toParentsMapInfo.value.city = districtList[1]
toParentsMapInfo.value.zone = districtList[2]
}
toParentsMapInfo.value.province = districtList[0]
toParentsMapInfo.value.detailedAddress = detailedAddress
console.log(toParentsMapInfo.value)
emit('mapData', toParentsMapInfo.value) // 传值到父组件
} else {
proxy.$modal.msgWarning('输入的位置定位失败, 请输入详细位置进行定位!')
}
}
initMapInfo()
</script>
<style lang="scss">
.amap-sug-result {
z-index: 2099;
}
.amap-copyright {
height: 24px;
}
.el-vue-search-box-container,
.el-vue-search-box-container input {
height: 29px;
border-radius: 8px;
}
.aMapMain {
width: 100%;
.aMap {
width: 100%;
height: 229px;
}
.aMapAddress {
text-align: left;
p {
margin-top: 5px;
margin-bottom: 0;
}
}
.isDisplayAMap {
width: 100%;
height: 36px;
.el-vue-amap {
display: none;
}
.el-vue-search-box-container {
position: initial;
width: 100%;
}
}
}
.el-vue-search-box-container {
border: 1px solid #e2e2e2;
height: 36px;
box-shadow: none;
}
</style>
- Parent component introduction
<!-- 模拟数据
const toParentsMap = ref({
city: "深圳市",
detailedAddress: "",
districtCode: "440304",
id: "B02F37TV2J",
lat: null,
lng: null,
province: "广东省",
zone: "宝安区",
}) -->
<el-form-item label="集结地点">
<span>搜索框和地图试图都展示</span>
<aMap :toParentsMap="toParentsMap" :isShowAMap="true"></aMap>
<span>只展示搜索框 不展示地图试图</span>
<aMap :toParentsMap="toParentsMap" :isShowAMap="true" :isDisplayAMap="false"></aMap>
</el-form-item>
import aMap from '@/components/aMap/index' //引入封装好的组件