首页 > 其他分享 >vue3 地图(天地图,百度地图,腾讯地图,高德地图)封装组件调用 带地图搜索功能common_tencent_map_ak

vue3 地图(天地图,百度地图,腾讯地图,高德地图)封装组件调用 带地图搜索功能common_tencent_map_ak

时间:2024-09-04 14:16:09浏览次数:7  
标签:map 地图搜索 point script 地图 value lat lng

废话不多说直接上组件代码:

<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

相关文章

  • imap发送邮件:如何配置IMAP服务器发邮件?
    imap发送邮件的设置教程?如何使用IMAP服务发送邮件?IMAP发送邮件作为一种高效的邮件管理方式,允许用户在多个设备上同步邮件,极大地提升了工作效率。AokSend将详细介绍如何配置IMAP服务器以实现邮件的发送。imap发送邮件:选择服务在开始配置之前,需要选择一个可靠的IMAP发送邮件......
  • 解决podman: ERRO[0000] running newuidmap: write to uid_map failed: Invalid argum
    报错ERRO[0000]running/usr/bin/newuidmap27115520100011100000655366553710000065537:newuidmap:writetouid_mapfailed:InvalidargumentError:cannotsetupnamespaceusing"/usr/bin/newuidmap":shouldhavesetuidorhavefilecapssetu......
  • map容器中的“值”为vector<type>型的时候的操作
    map容器中的“值”为vector<type>型的时候的操作这其实是我之前发布的一篇文章“map的详细用法”的延续,如果想要掌握并熟练运用map容器,你可以去看一下,建议收藏,因为你并不一定能够一下全部记住。1.数据的输入map容器中的“值”为vector<type>型的时候,数据的存储和一般的......
  • Blender多角度深度图depth map渲染,MVCNN数据生成
    现在在网上已有开源代码来生成论文中推荐的Phong渲染多视图,代码解析如下:https://blog.csdn.net/jorg_zhao/article/details/88345324,代码链接大佬传在了github上:https://github.com/zeaggler/ModelNet_Blender_OFF2Multiview该代码包针对phong渲染提供了Blender配置文件,渲......
  • php Semaphore 函数 信号量
    1一些理论基础:信号量:又称为信号灯、旗语用来解决进程(线程同步的问题),类似于一把锁,访问前获取锁(获取不到则等待),访问后释放锁。临界资源:每次仅允许一个进程访问的资源。临界区:每个进程中访问临界资源的那段代码叫临界区进程互斥:两个或以上的进程不能同时进入关于同一组共享变量......
  • bitmap(位图)的使用
    零存零取,整存零取,整存整取,零存整取bitmap介绍位图不是真正的数据类型,它是定义在字符串类型中,一个字符串类型的值最多能存储512M字节的内容,  位上限:2^(9(512)+10(1024)+10(1024)+3(8b=1B))=2^32b语句操作:setbit语法:SETBITkeyoffsetvalue(offset位偏移量,从0开始......
  • 今日分享——Map集合和Stream流
    Map集合认识Map集合1.Map集合称为双列集合,一次需要存一对数据做为一个元素,格式:{key1=value1,key2=value2,key3=value3,…}2.Map集合的每个元素分为两部分:key和value,key称为键,value称为值,整体叫键值对,因此Map也叫“键值对集合”3.Map集合的所有键是不允许重复的......
  • 【Java学习】Map集合&Stream流
    一、Collections1、可变参数定义:是一种特殊形参,定义在方法、构造器的形参列表里,定义格式是:方法名(数据类型... 形参名称){ }可变参数的特点和好处特点:可以不传数据给它;可以传一个或者同时传多个数据给它;也可以传一个数组给它;好处:常常用来灵活的接收数据。注意事项可......
  • 基因图谱(Genomic Mapping)分析与应用
    基因图谱(GenomicMapping)是基因组学研究中一项至关重要的技术,它为科学家提供了关于基因的位置和距离的详细信息。通过基因图谱的构建,研究人员可以揭示基因与性状之间的关系,探索疾病的遗传机制,并推动个性化医学的发展。本文将详细分析基因图谱的类型、构建方法、应用场景以及它......
  • Map集合语法
    1.Map集合1.1Map集合概述和特点【理解】Map集合概述interfaceMap<K,V> K:键的类型;V:值的类型Map集合的特点双列集合,一个键对应一个值键不可以重复,值可以重复Map集合的基本使用publicclassMapDemo01{  publicstaticvoidmain(String[]args){ ......