《前端开发 实践之 腾讯地图API 学习》

news2024/12/25 13:23:42

目录

  • 腾讯地图
    • 基础入门
      • 方式一
      • 方式二
    • 事件监听
      • 监听地图瓦片加载完成事件
    • 移除缩放控件 & 旋转控件 & 比例尺控件
    • 初始化marker图层
    • 创建信息窗
    • 点击地图拾取坐标
    • 打点标记
    • 反解析成详细地址
    • 根据输入详细地址 反解析成经纬度


腾讯地图

腾讯地图API学习-官方地址:https://lbs.qq.com/webDemoCenter/glAPI/glServiceLib/geocoderGetLocation

在这里插入图片描述

在这里插入图片描述

个人博客地址:

图片


基础入门

1. 初始化地图:

方式一

this.latLng = new qq.maps.LatLng( lat, lng );// 初始化默认坐标(入参:经纬度)
                // this.mapDetail = new qq.maps.Map( 目标DOM节点 ), {// 默认地图模式
                    zoom: 13,// 设置地图缩放级别
                    center: this.latLng,// 设置地图中心点坐标
                });

方式二

this.latLng = new TMap.LatLng( lat, lng );// 初始化默认坐标(入参:经纬度)
                this.mapDetail = new TMap.Map( 目标DOM节点 ), {// 默认地图模式
                    zoom: 13,// 设置地图缩放级别
                    center: this.latLng,// 设置地图中心点坐标
                });

事件监听

1. 监听地图瓦片加载完成事件

监听地图瓦片加载完成事件

let that = this
                // 监听地图瓦片加载完成事件
                this.mapDetail.on("tilesloaded", function () {
                    console.log(`腾讯地图加载完成`);
                })

移除缩放控件 & 旋转控件 & 比例尺控件

console.log(`移除缩放控件 & 旋转控件 & 比例尺控件`);

                let toDeleteArr = ['ZOOM', 'ROTATION', 'SCALE']
                toDeleteArr.map(i => {
                    if (this.mapDetail.getControl(TMap.constants.DEFAULT_CONTROL_ID[i])) this.mapDetail.removeControl(TMap.constants.DEFAULT_CONTROL_ID[i]);
                })

初始化marker图层

console.log(`初始化marker图层`);

                this.markerLayer = new TMap.MultiMarker({
                    id: `marker-layer`,
                    map: this.mapDetail,
                    styles: {
                        // 点标记样式:marker
                        marker: new TMap.MarkerStyle({
                            width: 25, // 样式宽
                            height: 40, // 样式高
                            anchor: { x: 10, y: 30 }, // 描点位置
                            // src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',// 引入自定义大头针图标
                        }),
                    },
                });

创建信息窗

console.log(`创建信息窗`);

                this.info = new TMap.InfoWindow({
                    map: this.mapDetail,
                    position: this.mapDetail.getCenter(),
                    offset: { x: -3, y: -35 } //设置信息窗相对position偏移像素
                }).close();
                console.dir(this.info.dom);

点击地图拾取坐标

let that = this

                //绑定点击事件
                this.mapDetail.on("click", function( evt ) {
                    var lat = evt.latLng.getLat().toFixed(7);
                    var lng = evt.latLng.getLng().toFixed(7);

                    console.log(`当前点击的坐标为:${ lat }, ${ lng }`);
                    that.inglatXY = [ lng, lat ]
                    that.getDetailAddress( lat, lng );
                    that.toMarker( lat, lng );
                    that.mapDetail.panTo(new qq.maps.LatLng(lat, lng))
                })

打点标记

去进行打点标记
if (this.markerLayer) {
                    this.removeMarker();
                    this.toCreateMarkerLayer();
                }

                this.markerLayer.add({
                    position: new TMap.LatLng( lat, lng ),
                    styleId: 'marker',// 应用自定义样式
                });
                console.log(this.markerLayer.geometries[0].position, `markerLayer`);

反解析成详细地址

let geocoder = new qq.maps.Geocoder();// 初始化geocoder
                let latLng = new qq.maps.LatLng( lng, lat );
                geocoder.getAddress( latLng );
                geocoder.setComplete(result => {
                    this.detailAddress = result.detail.address;
                    console.log(`地址:`, this.detailAddress);
                    this.toShowPOI( { poi: { name: this.detailAddress, latLng } } );
                });
                geocoder.setError( err => {
                    this.$message.warning(`解析地址出错`);
                });

根据输入详细地址 反解析成经纬度

let _this = this
                if (val) {
                    let geocoder = new qq.maps.Geocoder();// 初始化geocoder
                    geocoder.getLocation(val)
                    geocoder.setComplete(result => {
                        const { lat, lng } = result.detail.location;
                        let latLng = new qq.maps.LatLng(lat, lng);
                        this.latitude = lat;
                        this.longitude = lng;

                        this.toMarker( lat, lng )
                        this.toShowPOI( { poi: { name: result.detail.address, latLng } } );
                        this.mapDetail.panTo(new qq.maps.LatLng(lat, lng))
                        console.log(result.detail, 'getXYByDetailAddress');
                    })
                    geocoder.setError(err => {
                        console.log(`解析错误,请输入正确地址`);
                        // this.$message.warning(`解析错误,请输入正确地址`);
                    });

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/744316.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

浅谈Web前端开发软件包管理器—Bower的基本使用

前言 Bower 是一个客户端的软件包管理器,它可用于搜索、安装和卸载如 JavaScript、HTML、CSS 之类的网络资源,Bower 是 Web 开发中的一个前端文件包管理器,类似于 Node 模块的 npm 包管理器,bower 依赖于 Git、Node 和 npm。 安…

HarmonyOS课程尝鲜计划,优享特权大礼包

报名入口:https://developer.huawei.com/consumer/cn/activity/901689042385499023

Mendix Excel导入组件的分析和应用

一、前言 企业在发展的过程中会使用各种各样的系统,其中很多系统用了5-10年,我们称之为遗留系统存在诸多风险:维护耗时、中断频繁、用户不友好、与新软件的兼容性问题等。总有一天,这些庞大的问题会垄断IT资源,使数字…

事物的属性与观察者有关吗?

我们通常对世界的看法是以分析和概念为基础的,我们倾向于将事物划分为各种相对的存在和概念。然而,有些领域超越了这种相对的观点,揭示了所有现象的无常性、空虚性和无自性,认识到它们的真实本质。如在人机环境系统中就认为&#…

【车载Android】多用户(一) - Linux用户与Android多用户

现如今手机这样的移动设备已经是人手一台了,但是汽车依然是以家庭为单位使用,不同的家庭成员对于汽车的使用存在着差异,比如空间、功能、影音风格等。因此,“智能汽车”需要具备千人千面的特性,能够适应不同的用户和场…

Linux中Makefile详细教程

目录 Makefile Makefile的介绍 Makefile简单的编写 .PHONY 问题: 如果只执行make,它执行的是Makefile里哪一段语句呢? 怎么知道我的可执行程序是最新的呢? Makefile编译多个文件 进度条小程序 Makefile Makefile的介绍 …

Acwing.860 染色法判定二分图(二分图染色法)

题目 给定一个n个点m条边的无向图,图中可能存在重边和自环。 请你判断这个图是否是二分图。 输入格式 第一行包含两个整数n和m。 接下来m行,每行包含两个整数u和v,表示点u和点v之间存在一条边。 输出格式 如果给定图是二分图&#xff0c…

openpnp - 汇川 Inovance IS620PS2R8I-IAB-C的参数读取

文章目录 openpnp - 汇川 Inovance IS620PS2R8I-IAB-C的参数读取概述笔记伺服和配套电机型号官方伺服调试软件笔记H00H01H02H03H04H05H06H07H08H09H0AH0BH0CH0DH0FH11H12H16H17H30H31自定义组备注END openpnp - 汇川 Inovance IS620PS2R8I-IAB-C的参数读取 概述 设备中用到了…

Enterprise:使用 MySQL connector 同步 MySQL 数据到 Elasticsearch

Elastic MySQL 连接器是 MySQL 数据源的连接器。它可以帮我们把 MySQL 里的数据同步到 Elasticsearch 中去。在今天的文章里,我来详细地描述如何一步一步地实现。 在下面的展示中,我将使用 Elastic Stack 8.8.2 来进行展示。 无缝集成:将 Ela…

两只小企鹅(Python实现)

目录 1 和她浪漫的昨天 2 未来的旖旎风景 3 Python完整代码 1 和她浪漫的昨天 是的,春天需要你。经常会有一颗星等着你抬头去看; 和她一起吹晚风吗﹖在春天的柏油路夏日的桥头秋季的公园寒冬的阳台; 这世界不停开花,我想放进你心里一朵&#…

docker 里面各种 command not found 总结

一、ip:command not found 执行命令: apt-get update & apt-get install -y iproute2 二、yum:command not found 执行命令: apt-get update & apt-get install -y yum 三、ping:command not found 执行命…

113、基于51单片机的智能电子密码锁控制系统设计(程序+原理图+PCB源文件+Proteus仿真+参考论文+开题报告+设计资料+焊接指导书+元器件清单等)

摘 要 在日常的生活和工作中, 住宅与部门的安全防范、单位的文件档案、财务报表以及一些个人资料的保存多以加锁的办法来解决。具有防盗报警等功能的电子密码锁代替密码量少、安全性差的机械式密码锁已是必然趋势。随着科学技术的不断发展,人们对日常生活中的安全保…

多元融合:流媒体传输网络的全盘解法

我们在寻找「网络」的全盘解法。 音视频数字化在消费领域的红利俨然见顶,而产业级视频应用激活了更多场景下的业务模式。与此同时,音视频客户也从单一的业务需求,趋向于多种业务并行存在的需求。 固有的网络能满足新兴的业态吗?延…

帧同步实现PuppetMaster布娃娃系统的问题

1)帧同步实现PuppetMaster布娃娃系统的问题 ​2)如何屏蔽Unity打包在IQOO安卓手机上出现一侧是黑边的现象 3)SLG或者策略游戏的联盟边界线是如何实现的 这是第343篇UWA技术知识分享的推送,精选了UWA社区的热门话题,涵盖…

Acwing算法基础 前缀和与差分

前缀和与差分 AcWing 795. 前缀和 import java.util.*; public class Main{public static void main(String[] args ){Scanner scnew Scanner(System.in);int nsc.nextInt();int msc.nextInt();int[] arrnew int[n1];arr[0]0;for(int i1;i<n;i) {arr[i]sc.nextInt()arr[i-1…

基于Java+Swing实现表白墙的效果

JavaSwingmysql员工工资管理系统 一、系统介绍二、功能展示1.效果展示 三、系统实现1.salary.java 四、其它系统五、获取源码 一、系统介绍 使用javaswing桌面编程技术实现的一个表白墙的效果 二、功能展示 1.效果展示 基于javaswing表白墙的效果 三、系统实现 1.salary.ja…

Python实现AdaBoost回归模型(AdaBoostRegressor算法)并应用网格搜索算法调优项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档代码讲解&#xff09;&#xff0c;如需数据代码文档代码讲解可以直接到文章最后获取。 1.项目背景 AdaBoost算法&#xff08;Adaptive Boosting&#xff09;是一种有效而实用的Boosting算法&#xff0c;…

C++ | 反向迭代器

目录 前言 一、基本框架 二、起始位置和结束位置 三、反向迭代器的自增与自减 四、反向迭代器的判断 五、list类的修改 六、单独设计反向迭代器类的意义 前言 反向迭代器实际上与我们前面的stack、queue、priority一样&#xff0c;都是适配器&#xff1b;我们可以通过正向…

国网技术学院MySQL课堂练习

一、数据库的安装和配置 在虚拟机中安装WINDOWS7操作系统 正常安装&#xff0c;查询安装教程即可安装必备组件和MYSQL5.7数据库 正常安装&#xff0c;查询安装教程即可修改my.ini配置文件中关于character_set的相关设置 直接补下面的代码即可&#xff0c;作用为设置默认的内…

Hudi基础知识讲解

Hudi概述 Hudi是一种数据湖的存储格式&#xff0c;在Hadoop文件系统之上提供了更新数据和删除数据的能力以及消费变化数据的能力。支持多种计算引擎&#xff0c;提供IUD接口&#xff0c;在 HDFS的数据集上提供了插入更新和增量拉取的流原语。 基础架构图 Hudi特性 ACID事务能…