• vue3 腾讯地图输入地址或拖动标记获取经纬度

    先看效果，经纬度没有显示出来，要显示经纬度多增加一个input就行了

    正文

    1、首先你要去腾讯位置服务申请key腾讯位置服务 - 立足生态，连接未来腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案；有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口和各类地图API等。https://lbs.qq.com/

    2、 在index.html中加载腾讯API服务，这里要特别注意“?v=2.exp”，版本不同使用的方法函数就不一样，这里我用的是v2版本。

            2.1、v参数是引用的版本号，目前腾讯地图提供两个版本，分别是v=1，v=2.exp，推荐使用2.exp，可以获得最新最快的支持。

    1.  
    2. // v1版本创建map对象，初始化地图
    3. var map = new TMap.Map('container', {
    4.     center: new TMap.LatLng(39.984120,116.307484), //设置地图中心点坐标
    5.     zoom:11,   //设置地图缩放级别
    6.     pitch: 43.5,  //设置俯仰角
    7.     rotation: 45    //设置地图旋转角度
    8. });
    9.  
    10. // v2版本
    11. function init() {
    12.   var myLatlng = new qq.maps.LatLng(-34.397, 150.644);
    13.   var myOptions = {
    14.     zoom: 8,
    15.     center: myLatlng,
    16.     mapTypeId: qq.maps.MapTypeId.ROADMAP
    17.   }
    18.   var map = new qq.maps.Map(document.getElementById("container"), myOptions);
    19. }

    2.1、继续之前的步骤

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <link rel="icon" href="/favicon.ico" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>网站title>
    8.     
    9.     <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的key">script>
    10.   head>
    11.   <body>
    12.     <div id="app">div>
    13.     <script type="module" src="/src/main.js">script>
    14.   body>
    15. html>

    3、页面使用

    2.         <el-dialog v-model="dialogMap" title="获取经纬度" width="600px" :close-on-click-modal="false" draggable>
    3.             <div class="p16">
    4.                 <div class="task-one">
    5.                     <div class="task-one__item">
    6.                         <span class="task-one__label">地址：span>
    7.                         <el-input placeholder="输入地址获取经纬度" v-model.trim="addrs" clearable>el-input>
    8.                     div>
    9.                     <div class="task-one__btn clearfix">
    10.                         <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">
    11.                             搜索
    12.                         el-button>
    13.                     div>
    14.                 div>
    15.                 
    16.                 <div id="container">div>
    17.             div>
    18.             <template #footer>
    19.                 <span class="dialog-footer">
    20.                     <el-button type="primary" @click="confirmMap">确认地址el-button>
    21.                     <el-button @click="dialogMap = false">取消el-button>
    22.                 span>
    23.             template>
    24.         el-dialog>

    4、js，这里涉及到一个知识点，就是我们要请求腾讯地图的地理接口，但如果直接用axios的话我们会涉及到跨域问题，此时我们要借助vue-jsonp把接口变为jsonp请求

    npm i vue-jsonp -S

    5、输入地址搜索后的效果

     

    更多api及事件请点添加标记 | 腾讯位置服务腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案；有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口和各类地图API等。https://lbs.qq.com/webDemoCenter/javascriptV2/marker/showMarker

    创作不易，喜欢就点个赞，有问题在下方留言，共同进步

  • 相关阅读:
    数据库中间件-ShardingSphere-Proxy(一)
    【前端实例代码】用HTML、CSS和JavaScript创建一个简易图片编辑器（实现图片的亮度、饱和度、灰度、颜色反转、图片旋转镜面翻转等滤镜效果）
    完全卸载清理干净xcode
    编译原理复习——词法分析(自底向上)
    C语言深度解析：函数的形参和实参与传值和传址（多角度分析，让你有一种相见恨晚的感觉！！！！）
    oracle 还原被覆盖的视图
    【前段基础入门之】=＞CSS3新增渐变颜色属性
    linux 服务器进程、端口查找，nginx 配置日志查找，lsof 命令详解
    记录：R语言生成热图（非相关性）
    .NET周刊【1月第1期 2024-01-07】
  • 原文地址：https://blog.csdn.net/u014678583/article/details/125895585