之前项目中,需要高德地图,但因项目要求,需用leaflet集成高德。
好处:leaflet非常轻量化,方法调用很容易上手,切集成后,类似点击、画线、图层切换、打点等等事件可由leaflet统一调用,无需再看其他地图api文档重复学习。
不好处:一些高德特有的api调用,leaflet无法介入,因此还是需要高德key,进行特有的api调用,比如经纬度和详细地址的互相转换。
npm install leaflet
<template>
<div ref="mapRef" class="map"></div>
</template>
初始化leaflet
const initMap = () => {
const map = L.map(mapRef.value, {
center: [lnglatData.value[1], lnglatData.value[0]],
zoom: 13,
minZoom: 6,
maxZoom: 23
});
// const mapType = 'vec';
L.tileLayer(
'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
attribution: '© 高德地图',
maxZoom: 25,
minZoom: 1,
subdomains: '1234',
zoom: 3
}
).addTo(map);
map.on('click', (evt) => {
mapObj.value.removeLayer(marker.value);
map.flyTo(evt.latlng); // 参数1是中心点经纬度,参数2是缩放级别
mapClick([evt.latlng.lat, evt.latlng.lng]);
});
return map;
};
点击事件:
const mapClick = (e) => {
if (type.value === 'add') {
marker.value = L.marker(e).addTo(mapObj.value);
lnglatData.value[0] = e[1];
lnglatData.value[1] = e[0];
console.log(e, '---e');
regeoCode([e[1], e[0]]);
}
};
const removeMap = () => {
if (mapObj.value) {
mapObj.value.remove();
}
};
完整代码
<script setup>
import L from 'leaflet';
import { defineComponent, toRefs, reactive, getCurrentInstance, ref, onMounted, onUnmounted } from 'vue';
import { useStore } from '@zqxx/store';
import { zqUpload } from '@zqxx/components';
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
securityJsCode: '你的高德安全密钥',
};
const store = useStore();
const instance = getCurrentInstance();
const isVisible = ref(false);
const emits = defineEmits(['doRefreshMap']);
let title = ref('');
const type = ref('view');
const locationName = ref('');
const lnglatData = ref([]);
const mapDisabled = ref(false);
const validRange = ref('');
const formData = ref({});
const show = (ty, row) => {
if (ty === 'view') {
type.value = 'view';
title.value = '详情';
mapDisabled.value = true;
locationName.value = row.locationName;
lnglatData.value[0] = row.longitude;
lnglatData.value[1] = row.dimension;
} else if (ty === 'add') {
// console.log(row, '-add-row');
formData.value = row;
type.value = 'add';
mapDisabled.value = false;
lnglatData.value = [116.39743596925251, 39.90887057595898];
}
isVisible.value = true;
setTimeout(() => {
mapObj.value = initMap();
if (ty === 'view') {
marker.value = L.marker([lnglatData.value[1], lnglatData.value[0]]).addTo(mapObj.value);
}
}, 500);
};
defineExpose({
show,
});
const geocoder = ref(null);
const initMapGaode = () => {
AMapLoader.load({
key: '申请的高德key', // 申请好的Web端开发者Key,首次调用 load 时必填
plugins: ['AMap.Scale', 'AMap.Geocoder'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
AMapUI: {
version: '1.1',
},
})
.then((AMap) => {
geocoder.value = new AMap.Geocoder({
city: '010', // 城市设为北京,默认:“全国”
radius: 1000, // 范围,默认:500
});
})
.catch((e) => {
console.log(e, 1111);
});
};
const regeoCode = (e) => {
geocoder.value.getAddress(e, (status, result) => {
if (status === 'complete' && result.regeocode) {
let address = result.regeocode.formattedAddress;
// document.getElementById('address').value = address;
locationName.value = address;
console.log(address, '---address');
} else {
// log.error('根据经纬度查询地址失败');
}
});
};
const mapObj = ref();
const mapRef = ref();
const marker = ref([]);
const layerGroup = ref(null);
const initMap = () => {
const map = L.map(mapRef.value, {
center: [lnglatData.value[1], lnglatData.value[0]],
zoom: 13,
minZoom: 6,
maxZoom: 23
});
// const mapType = 'vec';
L.tileLayer(
'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
attribution: '© 高德地图',
maxZoom: 25,
minZoom: 1,
subdomains: '1234',
zoom: 3
}
).addTo(map);
map.on('click', (evt) => {
mapObj.value.removeLayer(marker.value);
map.flyTo(evt.latlng); // 参数1是中心点经纬度,参数2是缩放级别
mapClick([evt.latlng.lat, evt.latlng.lng]);
});
return map;
};
const mapClick = (e) => {
if (type.value === 'add') {
marker.value = L.marker(e).addTo(mapObj.value);
lnglatData.value[0] = e[1];
lnglatData.value[1] = e[0];
console.log(e, '---e');
regeoCode([e[1], e[0]]);
}
};
const removeMap = () => {
if (mapObj.value) {
mapObj.value.remove();
}
};
const onConfirm = () => {
if (type.value === 'add') {
saveConfigLocation({
attendanceRange: formData.value.validRange,
configurationId: formData.value.id,
dimension: lnglatData.value[1],
locationName: locationName.value,
longitude: lnglatData.value[0],
}).then((res) => {
// console.log(res, '---saveConfigLocation');
emits('doRefreshMap');
onClose();
});
}
};
const onSearch = () => {
// mapObj.value.removeLayer();
};
//
const onClose = () => {
isVisible.value = false;
};
const onCloseDialog = () => {
isVisible.value = false;
removeMap();
lnglatData.value = [];
locationName.value = [];
mapDisabled.value = false;
};
// 在 onMounted 中初始化地图
onMounted(() => {
initMapGaode();
});
// 在组件卸载时删除地图
// onUnmounted();
</script>