我为本公司想建个网站,信息服务平台网站名称,宝安西乡做网站,低价格制作网站该组件配置了高德和腾讯地图的底图。具有新建图层和打点#xff08;使用leaflet中的方法#xff09;#xff0c;打点分为单个和多个。经纬度和详细地址的互相转换由高德api完成。
templatediv classcontainer!-- 搜索框 --div cla…该组件配置了高德和腾讯地图的底图。具有新建图层和打点使用leaflet中的方法打点分为单个和多个。经纬度和详细地址的互相转换由高德api完成。
templatediv classcontainer!-- 搜索框 --div classmodule-topel-input v-modelmodelValue placeholder stylewidth: 100%; inputonInput/ /div!-- 工具栏 --div classmodule-toolsdiv classtools-boxbutton clickonClickMark(1)打点-单个/buttonbutton clickonClickMark(2)打点-多个/buttonbutton clickonClearLayer清空/button/div/divdiv refmapLeafletRef classmap/div/div!-- button clickonClearLayerbtn/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?langzh_cnsize1scale1style8x{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}typevectorstyle0,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();
});
/scriptstyle scoped langscss
.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); //添加到地图中
