当前位置：首页 > news >正文

Vue2+OpenLayers接入天地图API实现搜索定位和点击获取经纬度及地址功能（提供Gitee源码）

news 来源：原创 2025/5/6 17:25:14

一、案例截图

二、安装OpenLayers库

三、安装Element-UI

四、完整代码

五、天地图地名搜索API文档

六、Gitee源码

一、案例截图

输入框搜索需要查询的大概地址，可以获取到经纬度和地址信息。

二、安装OpenLayers库

npm install ol

三、安装Element-UI

没安装的看官方文档：Element - The world's most popular Vue UI framework

四、完整代码

这边打点的时候主要用到了2个api，下面简单介绍一下概念，具体的用法可以参考完整代码。

VectorLayer：

是一个用于在地图上渲染矢量数据的层，支持显示点、线和面等几何图形。

通常用于需要较高精度和交互性的地理信息展示，比如标记地点、绘制地图区域、轨迹等。

特点：

支持多种几何类型: 可以容纳multiple，features（点、线、面），并为每一个feature设置样式。

批量管理：可以同时管理多个要素，适合用来显示大量地理信息。

交互性：通过监听事件（如点击、悬停等），用户可以与图层中的要素进行交互。

Overlay：

覆盖物（Overlay）是用于在地图上显示额外的HTML元素，如弹出窗口、信息框、控件等的层。与图层不同，覆盖物不直接渲染地理要素，而是用于展示与地图位置相关的HTML内容。

主要区别：

特性	VectorLayer	Overlay
用途	管理和显示多种类型的矢量要素	显示与特定位置相关的附加信息
几何体支持	支持多种几何形状（点、线、面）无几何体	主要用于浮动信息框或指示器
交互性	允许与多个要素交互	通常用于交互较少的附加信息展示
管理方式	同时管理多个要素	可批量操作，主要是单个地点信息的简单展示
层级关系	在地图上形成一个独立的图层	通常浮在其他图层之上，独立于图层结构

这边博主已经把代码都替大家写好了，直接把KEY替换成自己的就行了，可以再这个基础上继续添油加醋，写的比较简单，实际项目开发会复杂一些。

<template><div><div><span>搜索地址：</span><el-autocompletev-model="keywords"style="width: 300px;margin-bottom: 10px":fetch-suggestions="querySearchAsync"placeholder="请输入内容"@select="searchAddress"></el-autocomplete><span style="margin-left: 10px"><span>经度：{{ form.lon }}</span><span style="margin-left: 10px">纬度：{{ form.lat }}</span><span style="margin-left: 10px">地址：{{form.address}}</span></span></div><div id="map-container"></div></div>
</template>
<script>
import {Map,View,Feature} from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import { get } from 'ol/proj';
import { getWidth, getTopLeft } from 'ol/extent'
import { WMTS } from 'ol/source'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import { defaults as defaultControls} from 'ol/control';
import { search} from '@/api/map'
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import {Point} from "ol/geom";
import {Icon, Style} from "ol/style";export const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = [];
for (let z = 0; z < 19; ++z) {resolutions[z] = size / Math.pow(2, z);
}
const TIAN_DI_KEY = '你申请的KEY';
export default {data() {return {map:null,keywords:'',// 搜索提示信息options: [],// 位置信息form: {lon: '',lat: '',address:'',},}},mounted(){this.initMap() // 加载矢量底图},methods:{initMap() {const KEY = '你申请的KEY'this.map = new Map({target: 'map-container',layers: [// 底图new TileLayer({source: new WMTS({url: `http://t{0-6}.tianditu.com/vec_c/wmts?tk=${KEY}`,layer: 'vec', // 矢量底图matrixSet: 'c', // c: 经纬度投影 w: 球面墨卡托投影style: "default",crossOrigin: 'anonymous', // 解决跨域问题 如无该需求可不添加format: "tiles", //请求的图层格式，这里指定为瓦片格式wrapX: true, // 允许地图在 X 方向重复（环绕）tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']})})}),// 标注new TileLayer({source: new WMTS({url: `http://t{0-6}.tianditu.com/cva_c/wmts?tk=${KEY}`,layer: 'cva', //矢量注记matrixSet: 'c',style: "default",crossOrigin: 'anonymous',format: "tiles",wrapX: true,tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15','16','17','18']})})})],view: new View({center: [120.555979, 31.876739],projection: projection,zoom: 12,maxZoom: 17,minZoom: 1}),//加载控件到地图容器中controls: defaultControls({zoom: false,rotate: false,attribution: false})});},querySearchAsync(queryString, cb){if (queryString) {const params = {postStr: JSON.stringify({keyWord: queryString,level: 18,//左下角和右上角经纬度，形成一个矩形区域，只在这个区域里面搜索mapBound: '120.403856,31.171395,120.949665,31.524762',queryType: "1",count: 10,start: 0,}),type: 'query',tk: TIAN_DI_KEY,};search(params).then(res=>{if(res.data.status.infocode === 1000 && res.data.pois){let list = res.data.pois;this.options = list;for (let i = 0; i < list.length; i++) {this.options[i].value = list[i].name;}}else {this.options = [];this.$message.error("查询无结果");}cb(this.options);})} else {this.options = [];cb(this.options);}},searchAddress(val){if (!val) {return;}let lonLatArr = val.lonlat.split(",");this.form = {lon: lonLatArr[0],lat: lonLatArr[1],address:val.address,};let coordinates = [this.form.lon,this.form.lat];this.addPoints(coordinates);// 设置新的中心和缩放级别this.map.getView().setCenter(coordinates); // 设置中心this.map.getView().setZoom(17); // 设置缩放级别（已经定义为13）},/*** 根据经纬度坐标添加自定义图标 支持base64*/addPoints(coordinate) {// 创建图层let pointLayer = new VectorLayer({source: new VectorSource(),});// 创建feature要素，一个feature就是一个点坐标信息const feature = new Feature({geometry: new Point(coordinate),});// 设置要素的图标feature.setStyle(new Style({// 设置图片效果image: new Icon({src: 'http://api.tianditu.gov.cn/img/map/markerA.png',// anchor: [0.5, 0.5],scale: 1.2,}),}));// 要素添加到地图图层上pointLayer.getSource().addFeature(feature);// 图层添加到地图上this.map.addLayer(pointLayer);},}
}
</script>
<style scoped>
#map-container {width: 100%;height: 100vh;
}
.popup-box {background: rgba(255, 255, 255, 0.95);border: 1px solid #ccc;border-radius: 8px;padding: 20px;z-index: 1000;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);transition: all 0.3s ease;max-width: 300px;font-family: 'Arial', sans-serif;position: absolute;transform: translate(-50%, -100%); /* 使弹出框上移并居中 */
}/* 添加箭头样式 */
.popup-box::after {content: "";position: absolute;top: 100%; /* 箭头位于弹出框的底部 */left: 50%; /* 箭头横向居中 */margin-left: -6px; /* 调整箭头与弹出框的间距 */border-width: 6px; /* 箭头的大小 */border-style: solid;border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent; /* 箭头的颜色 */
}.close-button {background: none;color: gray;border: none;font-size: 20px;position: absolute;top: 10px;right: 10px;cursor: pointer;
}.popup-content {width: 240px;margin-top: 10px;font-size: 16px;line-height: 1.5;
}
</style>

五、天地图地名搜索API文档

具体参数的含义和示例官方写的很详细了，地址：天地图API

六、Gitee源码

地址：Vue2+OpenLayers接入天地图API实现搜索定位和点击获取经纬度及地址功能

Vue2+OpenLayers接入天地图API实现搜索定位和点击获取经纬度及地址功能（提供Gitee源码）

目录一、案例截图二、安装OpenLayers库三、安装Element-UI 四、完整代码五、天地图地名搜索API文档六、Gitee源码一、案例截图输入框搜索需要查询的大概地址，可以获取到经纬度和地址信息。二、安装OpenLayers库 npm install ol 三、安装Element-UI…...

编程日记 2025/5/6 17:25:14

CrossFormer实战：使用CrossFormer实现图像分类任务（一）

摘要 CrossFormer是一种新型的视觉Transformer架构，旨在通过引入跨尺度注意力机制来提升计算机视觉任务的性能。该模型特别关注不同尺度特征之间的交互，解决了现有视觉Transformer在处理多尺度特征时的不足。研究背景在计算机视觉中，特征…...

编程日记 2025/5/5 22:19:47

性能测试工具Jmeter中的FTP脚本开发

FTP文件传输协议是TCP/IP协议组织中的常用协议之一，主要用在internet上双向传输文件。FTP协议具有客户端和服务器端两个部分组成部分，具有上传与下载两种功能。Jmeter也提供了FTP请求的测试支持，实现了上传和下载功能测试。对于上图的FTP请求…...

编程日记 2025/5/2 14:36:33

探索微软 M365 安全：全方位守护数字世界

在当今这个科技呈井喷式飞速发展，数字化浪潮以汹涌澎湃、锐不可当之势席卷全球的时代，企业与个人仿若置身于一片浩瀚无垠、信息奔涌的海洋之中，尽情畅享着技术革新所带来的无穷无尽便利。然而，恰如平静海面下潜藏着暗礁与汹涌暗流，网络安全问题恰似隐匿在暗处、随时可能给…...

编程日记 2025/5/3 3:41:05

Qt C++读写NFC标签NDEF网址URI

本示例使用的发卡器：https://item.taobao.com/item.htm?spma21dvs.23580594.0.0.1d292c1biFgjSs&ftt&id615391857885 #include "mainwindow.h" #include "ui_mainwindow.h" #include <QDebug> #include "QLibrary" …...

编程日记 2025/5/3 10:40:24

[SMARTFORMS] 自定义SMARTFORMS表单页格式

在SMARTFORMS表单开发过程中，用户打印的纸张有可能不是标准的页格式，需要我自定义页格式具体操作步骤如下所示 1.定义页格式事务码SPAD，点击"完全管理" 点击"设备类型"中的页格式的"显示"按钮点击创建按…...

编程日记 2025/5/6 0:41:32

大模型笔记：KV cache

1 为什么要使用KV cache 假设模型最终生成了四个token 对于第一个token，他的attention的计算方法为： 有了第一个token之后，生成第二个token的时候： sottmaxed表示已经逐行softmax后的结果同理，对于第三个token&…...

编程日记 2025/5/6 4:29:18

Android车机DIY开发之学习篇(三)替换Logo以正点原子为例

Android车机DIY开发之学习篇(三)替换Logo以正点原子为例启动 logo 包括 u-boot 阶段 logo 内核阶段 logo /sdk/kernel-5.10 目录下替换 logo.bmp 654270 logo_kernel.bmp 654270 编译 Linux 内核...

编程日记 2025/5/2 13:57:40

系统：Albaba Cloud Linux release 3 （OpenAnolis Editon）即 Centos 平替异常提示： cc: fatal error: ** signal terminated program cc1 compilation terminated. make: *** [Makefile:211: libmagic/apprentice.lo] Error 1搜…...

编程日记 2025/5/6 7:46:11

机器学习数据预处理preprocessing

预处理方法预处理方法预处理方法BinarizerFunctionTransformerKBinsDiscretizerKernelCentererLabelBinarizerLabelEncoderMaxAbsScalerMinMaxScalerMultiLabelBinarizer sklearn.preprocessing.Binarizer 设定一个阈值（threshold），对于每个…...

编程日记 2025/5/4 15:43:10

网络安全 | 什么是Bot防护？

关注：CodingTechWork Bot防护介绍随着互联网服务的普及和发展，越来越多的网站和应用遭遇了自动化攻击（Bot攻击）。Bot防护是一种安全技术，旨在检测和阻止自动化程序（即“机器人”或“bot”）对网…...

编程日记 2025/5/4 8:12:30

Qt学习笔记第81到90讲

第81讲串口调试助手实现自动发送为这个名叫“定时发送”的QCheckBox编写槽函数。想要做出定时发送的效果，必须引入QT框架下的毫秒级定时器QTimer，查阅手册了解详情。在widget.h内添加新的私有成员变量： QTimer *timer; 在widget类的构造…...

编程日记 2025/5/1 1:36:13

如何在本地部署大模型并实现接口访问（ Llama3、Qwen、DeepSeek等）

如何在本地部署大模型并实现接口访问（ Llama3、Qwen、DeepSeek等） 如何在本地部署大模型并实现接口访问（ Llama3、Qwen、DeepSeek等）模型地址模型下载模型部署指定显卡运行app.py 运行环境requirements 调用接口代码调用结语如何…...

编程日记 2025/5/6 15:36:42

使用 Linux tracepoint、perf 和 eBPF 跟踪数据包

大家读完觉得有帮助记得关注和点赞！！！ 目录 1 破局 1.1 逃离迷宫：上帝视角 1.2 网络跟踪：渴求利器 1.3 巨人肩膀：perf/eBPF 2 Perf 2.1 安装 perf 2.2 测试环境 2.3 初体验：跟踪 ping …...

编程日记 2025/5/2 13:50:59

给DevOps加点料：融入安全性的DevSecOps

从前，安全防护只是特定团队的责任，在开发的最后阶段才会介入。当开发周期长达数月、甚至数年时，这样做没什么问题；但是现在，这种做法现在已经行不通了。采用 DevOps 可以有效推进快速频繁的开发周期（有时…...

编程日记 2025/5/4 1:34:31

MySQL视图笔记

视图的理解 ①视图是一种虚拟表 ，本身是不具有数据的，占用很少的内存空间，它是 SQL 中的一个重要概念。 ②视图建立在已有表的基础上, 视图赖以建立的这些表称为基表。 ③对视图中的数据进行增加删除和修改，对应的数据表&a…...

编程日记 2025/5/2 14:18:27

【Ubuntu与Linux操作系统：十、C/C++编程】

第10章 C/C编程 10.1 Linux编程基础 Linux编程基础涵盖了C/C语言在Linux环境中的特点和使用方法。Linux以其高性能和开源特性成为系统编程的重要平台。 1. C语言与Linux的关系 Linux内核主要是用C语言编写的，因此学习C语言是理解Linux底层机制的必要前提。C语言的…...

编程日记 2025/5/2 14:37:40

豆包MarsCode：可以在线用的智能AI编程助手

大家好，今天我想和大家分享一个我最近发现的宝藏工具——豆包MarsCode。作为一个程序员，我一直在寻找能够提高工作效率、快捷、优化代码质量的在线编程工具。豆包MarsCode IDE，这个由字节跳动推出的智能编程助手，让我眼前一亮&…...

编程日记 2025/5/1 15:37:27

RabbitMQ基础（简单易懂）

RabbitMQ高级篇请看： RabbitMQ高级篇-CSDN博客目录什么是RabbitMQ？ MQ 的核心概念 1. RabbitMQ 的核心组件 2. Exchange 的类型 3. 数据流向说明如何安装RabbitQueue？ WorkQueue（工作队列）： Fa…...

编程日记 2025/5/4 22:19:47

UE5 使用内置组件进行网格切割

UE引擎非常强大，直接内置了网格切割功能并封装为蓝图节点，这项功能在UE4中就存在，并且无需使用Chaos等模块。那么就来学习下如何使用内置组件实现网格切割。 1.配置测试用StaticMesh 对于被切割的模型，需要配置一些参数。以UE5…...

编程日记 2025/5/6 1:27:47

【面试题】技术场景 6、Java 生产环境 bug 排查

生产环境 bug 排查思路分析日志：首先通过分析日志查看是否存在错误信息，利用之前讲过的 elk 及查看日志的命令缩小查找错误范围，方便定位问题。远程 debug 适用环境：一般公司正式生产环境不允许远程 debug，多在测试环…...

编程日记 2025/5/5 3:26:16

macOS 安装tomcat9

macOS 安装tomcat9 URL：https://tomcat.apache.org/download-90.cgi 解压之后放到指定目录 /Users/lanren/install/tomcat-9 自己取个名字就行给权限： ① 先进行权限修改：终端输入sudo chmod 755 /Users/lanren/install/tomcat-9/bin/…...

编程日记 2025/5/5 13:02:36

多线程之旅：属性及其基本操作

上次分享到了，多线程中是是如何创建的，那么接下来，小编继续分享下多线程的相关知识。多线程中的一些基本属性。基本属性属性获取方法IDgetId()名称getName()状态getState()优先级getPriority()是否后台线程isDemo()是否存活isAlive()是…...

编程日记 2025/5/4 8:38:21

隧道网络：为数据传输开辟安全通道

什么是隧道网络？ 想象一下，你正在一个陌生的城市旅行，并且想要访问家里的电脑。但是，直接连接是不可能的，因为家庭网络通常受到防火墙或路由器的保护，不允许外部直接访问。这时候，隧道网络&…...

编程日记 2025/5/2 13:58:03

Python爬虫-汽车之家各车系周销量榜数据

前言本文是该专栏的第43篇，后面会持续分享python爬虫干货知识，记得关注。在本专栏之前，笔者在文章《Python爬虫-汽车之家各车系月销量榜数据》中，有详细介绍，如何爬取“各车系车型的月销量榜单数据”的方法以及完整代码教学教程。而本文，笔者同样以汽车之家平台为例，…...

编程日记 2025/5/2 14:04:54

【机器学习】时序数据与序列建模：理论与实践的全面指南

云边有个稻草人-CSDN博客目录云边有个稻草人-CSDN博客引言一、时序数据的特点与挑战 1.1 时序数据的特点 1.2 序列建模的挑战二、传统方法概览 2.1 ARIMA 模型 2.2 Prophet 三、深度学习方法 3.1 RNN 和 LSTM 3.2 Attention 和 Transformer 3.3 自监督学习四、…...

编程日记 2025/5/2 11:14:11

java.net.SocketException: Connection reset 异常原因分析和解决方法

导致此异常的原因，总结下来有三种情况： 一、服务器端偶尔出现了异常，导致连接关闭解决方法： 采用出错重试机制二、服务器端和客户端使用的连接方式不一致解决方法： 服务器端和客户端使用相同的连接方式&#xff…...

编程日记 2025/5/2 22:08:52

【华为OD-E卷 - 恢复数字序列 100分（python、java、c++、js、c）】

【华为OD-E卷 - 恢复数字序列 100分（python、java、c、js、c）】题目对于一个连续正整数组成的序列，可以将其拼接成一个字符串，再将字符串里的部分字符打乱顺序。如序列8 9 10 11 12，拼接成的字符串为89101112&…...

编程日记 2025/5/2 14:12:52

05、Redis持久化

Redis是在内存中操作的，我们服器关闭重启机器后，正常是之前在redis中操作的数据都不存在了，但是实际上我们开机后重新启动redis服务，一样可以看到之前操作的数据。这是为什么呢？ 我们在redis的安装目录下可以看到有一…...

编程日记 2025/5/2 8:24:08

Python爬虫基础——selenium模块进阶（模拟鼠标操作）

主要内容包括：模拟鼠标操作。常用的鼠标操作有单击、双击、右击、长按、拖动、移动等，模拟这些操作需要用到selenium模块中的ActionChains类。该类的基本使用方法是将实例化好的WebDriver对象作参数传到该类中，实例化成一个ActionChains对象&…...

编程日记 2025/5/5 22:55:20

C++ macro: The # operator

C macro: The # operator 1. The # operator2. Stringizing (字符串化)References 1. The # operator The # operator converts a parameter of a function-like macro into a character string literal. #define STR(x) #xAll subsequent invocations of the macro STR woul…...

编程日记 2025/5/2 3:56:39

一、案例截图

二、安装OpenLayers库

三、安装Element-UI

四、完整代码

五、天地图地名搜索API文档

六、Gitee源码

相关文章：