废话不多说直接上组件代码:
<template> <!-- 地图 --> <div class="container w"> <div id="map" class="map radius-md" :style="{ width: width, height: height }"></div> </div> </template> <script> export default defineComponent({ props: { modelValue: { type: String, default: '上海市黄浦区上海中心大厦', }, // 是否可拖拽 draggable: { type: Boolean, default: true, }, width: { type: String, default: '100%', }, height: { type: String, default: '350px', }, type: { type: String, default: 'baidu', // 地图类型 默认1.tianditu天地图/2.baidu百度地图/3.tencent腾讯地图/4.amap高德地图 }, }, emits: ['point'], setup(props, context) { // 密钥
const common_amap_map_ak = 'xxxxxxxxxxx'; const common_amap_map_safety_ak = 'xxxxxxxxxx'; const common_baidu_map_ak = 'xxxxxxxxxx'; const common_tencent_map_ak = 'xxxxxxxxx'; const common_tianditu_map_ak = 'xxxxxxxxxxx'; const map = ref(null); const lng = ref(121.47894); const lat = ref(31.223); watch( () => props.modelValue, (val) => { if (!val) return; map_event(val); } ); onMounted(() => { load_map_script(); // 加载地图资源 }); const load_map_script = () => { // 此处在所需页面引入资源就是,不用再public/index.html中引入 let script = document.createElement('script'); script.type = 'text/javascript'; script.className = 'loadmap'; // 给script一个类名 if (props.type === '1') { // 天地图 script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${common_tianditu_map_ak || 'xxx'}`; } else if (props.type === '2') { // 百度地图 script.src = `https://api.map.baidu.com/getscript?v=3.0&ak=${common_baidu_map_ak || 'xxx'}`; } else if (props.type === '3') { // 腾讯地图 script.src = `https://map.qq.com/api/js?v=2.exp&key=${common_tencent_map_ak || 'xxx'}&callback=init`; } else if (props.type === '4') { // 高德地图 script.src = `https://webapi.amap.com/maps?v=2.0&key=${common_amap_map_ak || 'xxx'}`; } // 使用script.onload,待资源加载完成,再初始化地图 if (props.type === '3') { window.init = () => { init(); }; load_tx_map(); } else { script.onload = () => { init(); }; } let loadmap = document.getElementsByClassName('loadmap'); if (loadmap) { // 每次append script之前判断一下,避免重复添加script资源标签 for (var i = 0; i < loadmap.length; i++) { document.body.removeChild(loadmap[i]); } } if (props.type === '4') { window._AMapSecurityConfig = { securityJsCode: common_amap_map_safety_ak || 'xxx', }; } document.body.appendChild(script); }; const load_tx_map = () => { // 此处在所需页面引入资源就是,不用再public/index.html中引入 let script = document.createElement('script'); script.type = 'text/javascript'; script.className = 'loadmap2'; // 给script一个类名 script.src = `https://map.qq.com/api/gljs?v=1.exp&key=${common_tencent_map_ak || 'xxx'}&libraries=service`; let loadmap2 = document.getElementsByClassName('loadmap2'); if (loadmap2) { // 每次append script之前判断一下,避免重复添加script资源标签 for (var i = 0; i < loadmap2.length; i++) { document.body.removeChild(loadmap2[i]); } } document.body.appendChild(script); }; // 初始化地图 const init = () => { switch (props.type) { case '1': const T = window.T; // 坐标 map.value = new T.Map('map'); let point = new T.LngLat(lng.value, lat.value); map.value.centerAndZoom(point, 10); // 禁止鼠标滚动缩小放大 map.value.disableScrollWheelZoom(); // 添加控件 //创建缩放平移控件对象 let control = new T.Control.Zoom(); // control.setPosition(T_ANCHOR_TOP_RIGHT); //添加缩放平移控件 map.value.addControl(control); map.value.clearOverLays(); let marker = new T.Marker(point); map.value.addOverLay(marker); if (props.draggable) { marker.enableDragging(); marker.addEventListener('dragend', function (e) { map.value.panTo(new T.LngLat(e.lnglat.lng, e.lnglat.lat)); lat.value = e.lnglat.lat; lng.value = e.lnglat.lng; context.emit('point', lng, lat); }); } break; case '2': const BMap = window.BMap; map.value = new BMap.Map('map', { enableMapClick: false, }); let point2 = new BMap.Point(lng.value, lat.value); map.value.centerAndZoom(point2, 10); // 初始化地图,设置中心点坐标和地图级别 // 添加控件 let navigationControl = new BMap.NavigationControl({ // 靠左上角位置 anchor: window.BMAP_ANCHOR_TOP_LEFT, // LARGE类型 type: window.BMAP_NAVIGATION_CONTROL_LARGE, }); map.value.addControl(navigationControl); let marker2 = new BMap.Marker(point2); map.value.addOverlay(marker2); if (props.draggable) { // 修正marker的初始化 marker2.enableDragging(); marker2.addEventListener('dragend', function (e) { map.value.panTo(e.point); lat.value = e.point.lat; lng.value = e.point.lng; context.emit('point', lng, lat); }); // 设置标注提示信息 let cr = new BMap.CopyrightControl({ anchor: window.BMAP_ANCHOR_BOTTOM_RIGHT }); map.value.addControl(cr); //添加版权控件 let bs = map.value.getBounds(); //返回地图可视区域 cr.addCopyright({ id: 1, content: '<div class="map-dragging-tips"><span>' + '拖动红色图标直接定位' + '</span></div>', bounds: bs }); } break; case '3': const qq_maps = window.qq.maps; let point3 = new qq_maps.LatLng(lat.value, lng.value); map.value = new qq_maps.Map('map', { center: point3, zoom: 10, }); let marker3 = new qq_maps.Marker({ map: map.value, position: point3, draggable: props.draggable, }); qq_maps.event.addListener(marker3, 'dragend', function (e) { lat.value = e.latLng.lat; lng.value = e.latLng.lng; map.value.panTo(e.latLng); context.emit('point', lng, lat); }); break; case '4': const AMap = window.AMap; map.value = new AMap.Map('map', { zoomEnable: true, resizeEnable: false, scrollWheel: false, zoom: 10, // 初始化地图级别 center: [lng.value, lat.value], // 初始化地图中心点位置 }); AMap.plugin(['AMap.ToolBar'], function () { // 在图面添加工具条控件, 工具条控件只有缩放功能 map.value.addControl(new AMap.ToolBar()); }); // 创建标注 var marker_config = { position: map.value.getCenter(), // offset: new AMap.Pixel(-13, -30), draggable: props.draggable, }; let marker4 = new AMap.Marker(marker_config); marker4.setMap(map); // 标注可拖拽回调 if (props.draggable) { marker4.on('dragend', (e) => { map.value.panTo(e.lnglat); lng.value = e.lnglat.lng; lat.value = e.lnglat.lat; context.emit('point', lng.value, lat.value); }); } map.value.add(marker4); break; } }; const map_event = (value) => { switch (props.type) { case '1': let geo = new T.Geocoder(); geo.getPoint(value, function (result) { let point = result.getLocationPoint(); if (result.getStatus() == 0) { lng.value = point.lng; lat.value = point.lat; init(); map.value.panTo(new T.LngLat(lng.value, lat.value)); context.emit('point', lng.value, lat.value); } else { ElMessage.info(point?.getMsg() || '您选择地址没有解析到结果!'); } }); break; case '2': // 创建地址解析器实例 let geo2 = new window.BMap.Geocoder(); // 将地址解析结果显示在地图上,并调整地图视野 geo2.getPoint( value, function (point) { if (point) { lng.value = point.lng; lat.value = point.lat; context.emit('point', lng.value, lat.value); init(); } else { ElMessage.info(point?.getMsg() || '您选择地址没有解析到结果!'); } }, '全国' ); break; case '3': let geo3 = new TMap.service.Geocoder(); geo3.getLocation({ address: value }).then((result) => { let lnglat = result.result.location; lng.value = lnglat.lng; lat.value = lnglat.lat; init(); context.emit('point', lng.value, lat.value); }); break; case '4': AMap.plugin('AMap.Geocoder', () => { new AMap.Geocoder().getLocation(value, (status, result) => { if (status === 'complete' && result.geocodes.length) { var lnglat = result.geocodes[0].location; lng.value = lnglat.lng; lat.value = lnglat.lat; init(); context.emit('point', lng.value, lat.value); } else { ElMessage.info('您选择地址没有解析到结果!'); } }); }); break; } }; }, }); </script> <style lang="scss" scoped></style>
组件调用及回调:
<maps v-model="map_address" :type="common_map_type" @point="map_point"></maps>参数:
// 地址 const map_address = ref(''); // 地图类型 const map_type = ref('tianditu');组件回调:
//地图用于回调用于获取坐标 const map_point = (lng: number, lat: number) => { form.lng = lng; form.lat = lat; };
地图效果展示:
标签:map,地图搜索,point,script,地图,value,lat,lng From: https://www.cnblogs.com/sws-kevin/p/18396320