该组件配置了高德和腾讯地图的底图。具有新建图层和打点(使用leaflet中的方法),打点分为单个和多个。经纬度和详细地址的互相转换由高德api完成。
<template>
<div class="container">
<!-- 搜索框 -->
<div class="module-top">
<el-input v-model="modelValue" placeholder="" style="width: 100%;" @input="onInput"/>
</div>
<!-- 工具栏 -->
<div class="module-tools">
<div class='tools-box'>
<button @click="onClickMark(1)">打点-单个</button>
<button @click="onClickMark(2)">打点-多个</button>
<button @click="onClearLayer">清空</button>
</div>
</div>
<div ref="mapLeafletRef" class="map"></div>
</div>
<!-- <button @click="onClearLayer">btn</button> -->
</template>
<script setup>
import L from 'leaflet';
import AMapLoader from '@amap/amap-jsapi-loader';
import { onMounted, onUnmounted, ref, getCurrentInstance, watch } from 'vue';
window._AMapSecurityConfig = { // 高德安全密钥
securityJsCode: '申请的高德安全密钥',
};
const props = defineProps({
mapType: { // 地图底图,高德、腾讯
type: String,
default: () => {
return 'gaode';
}
}
});
watch(() => props, (newV, oldV) => {
console.log(newV, 'new', oldV, 'old');
}, {
immediate: true
});
const emits = defineEmits(['doRefreshMap']);
const mapObj = ref(); // leaflet对象
const mapLeafletRef = ref(null); //
const mapGaode = ref(null); // 高德
const modelValue = ref('');
const geocoder = ref(null); // 经纬度解析obj
const layerGroup = ref(null);
const autocomplete = ref(null);
const gaodeMapOption = ref({
url: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
option: {
subdomains: '1234'
}
});
const tencentMapOption = ref({
url: 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0',
option: {
subdomains: '0123',
tms: true
}
});
// 初始化地图:leaflet
const initMap = () => {
let mapOption = {};
if (props.mapType === 'gaode') {
mapOption = gaodeMapOption.value;
} else if (props.mapType === 'tengxun') {
mapOption = tencentMapOption.value;
}
const map = L.map(mapLeafletRef.value, {
center: [39.90887, 116.397435],
zoom: 11,
minZoom: 6,
maxZoom: 20,
zoomControl: true, //是否启用地图缩放控件
attributionControl: false, 是否启用地图属性控件
});
L.tileLayer( // 给leaflet添加瓦片底图
mapOption.url, mapOption.option
).addTo(map);
// 绑定leaflet的click点击事件
map.on('click', (evt) => {
mapClick([evt.latlng.lat, evt.latlng.lng]);
});
// 创建图层并添加至地图
layerGroup.value = L.layerGroup();
layerGroup.value.addTo(map);
return map;
};
const initMapGaode = () => {
AMapLoader.load({
key: '申请的高德key', // 申请好的Web端开发者Key,首次调用 load 时必填
plugins: ['AMap.Scale', 'AMap.Autocomplete', 'AMap.PlaceSearch'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
AMapUI: {
version: '1.1',
},
}).then((AMap) => {
mapGaode.value = AMap;
geocoder.value = new AMap.Geocoder({ // 经纬度解析
city: '010', // 城市设为北京,默认:“全国”
radius: 1000, // 范围,默认:500
});
const autoOptions = {
city: '全国'
};
autocomplete.value = new AMap.Autocomplete(autoOptions);
}).catch((e) => {
console.log(e, 'catch');
});
};
const marker = ref([]);
const mapClick = (e) => { // leaflet的点击方法
// onClearLayer();
marker.value = L.marker(e);
layerGroup.value.addLayer(marker.value);
regeoCode([e[1], e[0]]);
};
const regeoCode = (e) => { // 经纬度转换成详细地址
geocoder.value.getAddress(e, (status, result) => {
if (status === 'complete' && result.regeocode) {
let address = result.regeocode.formattedAddress;
console.log(address, '---address');
emits('doRefreshMap', address);
} else {
console.log('根据经纬度查询地址失败');
}
});
};
const onClearLayer = () => { // 清除全部图层上的内容
layerGroup.value.clearLayers();
};
const onInput = (e) => { //input监听输入
//console.log(e, '--e');
autocomplete.value.search(e, (status, result) => {
// 搜索成功时,result即是对应的匹配数据
console.log(result, '---result');
});
};
const removeMap = () => {
if (mapObj.value) {
mapObj.value.remove();
}
};
const show = (e) => {
console.log('111');
};
const markNumSingle = ref(true);
const onClickMark = (e) => {
if (e === 1) {
markNumSingle.value = true;
} else {
markNumSingle.value = false;
}
};
defineExpose({
onClearLayer
});
onMounted(() => {
mapObj.value = initMap();
initMapGaode();
});
// 在组件卸载时删除地图
onUnmounted(() => {
removeMap();
});
</script>
<style scoped lang="scss">
.map {
height: 100%;
width: 100%;
z-index: 0;
}
.map2 {
height: 40vh;
z-index: 0;
}
.container {
height: 50vh;
position: relative;
.module-top{
position: absolute;
width: 200px;
height: 50px;
top: 20px;
left: 80px;
z-index: 10;
}
.module-tools {
width:500px;
height:50px;
position: absolute;
bottom:0;
left:30%;
z-index: 10;
background:pink;
.tools-box {
display:flex;
align-items:center;
justify-content:center;
}
}
}
</style>
使用leaflet新建一底图的简写方式
let map = L.map('map').setView([39.90887, 116.397435], 17);
复杂icon标点
// latlngs是标点坐标,格式同初始化地图时的中心坐标
let marker = L.marker(latlngs, {
icon: L.divIcon({
className: "dIcon", //标点icon的容器类名
html:`标点icon的html字段内容`, //可以添加标点名字之类的自定义内容
// iconSize: [60, 24] //标点icon的容器大小,也可以直接用className类名写css样式
})
}).addTo(map); //添加到地图中