OpenLayers入门，OpenLayers地图鼠标点击事件使用，点击地图后弹框并显示当前位置经纬度

最新推荐文章于 2024-07-02 16:27:41 发布
最新推荐文章于 2024-07-02 16:27:41 发布
阅读量1.7k 收藏 1
点赞数 3
分类专栏： # Vue+OpenLayers6入门 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： 前端 javascript OpenLayers 鼠标点击获取经纬度 地图弹框
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/132012703
版权
OpenLayers6一本通 同时被 3 个专栏收录
132 篇文章 10 订阅 ¥159.90 ¥99.00
订阅专栏
Vue+OpenLayers6入门到实战
121 篇文章 64 订阅 ¥119.90 ¥99.00
订阅专栏
Vue+OpenLayers6入门
69 篇文章 92 订阅 ¥69.90 ¥99.00
订阅专栏

专栏目录：
OpenLayers入门教程汇总目录

前言

本章主要讲解OpenLayers地图点击事件的使用，以及监听地图点击事件后进行简单弹框并获取当前点击位置的经纬度并显示wgs84坐标位置和度分秒格式经纬度信息。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖
yarn add ol

vue中如何使用：

了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
订阅专栏
Openlayers 教程 05 - feature（图形要素）点击和双击事件
linzi19900517的博客
09-08 3292
Openlayers 教程 - feature（图形要素）点击和双击事件。
Openlayers Map事件基础及重点内容讲解
大剑师兰特的GIS世界
07-10 744
Openlayers map事件是非常重要的交互，没有这些事件，地图存在的意义仅有2%。这些事件都有哪些呢，如何使用呢，我们实战中都有涉猎，一下为基础介绍和API详解。
OpenLayers学习笔记中级篇（六、地图交互）
MagicMHD的博客
06-10 1313
1、Feature选取之选中样式 <!doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> &...
OpenLayers学习笔记中级篇（五、地图事件）
MagicMHD的博客
06-10 3448
事件让很多业务的东西串联在一起，在前端中起着非常重要的作用，比如鼠标点击，移动事件。但其应用远不仅如此，现实生活中就存在很多大大小小的事件。 在OpenLayers 3中，同样存在非常多的事件，比如鼠标左键单击，双击等等。 同时还有一些用于各个模块之间进行协作使用的事件，比如ol.Map的postrender和propertychange事件。 通过这些事件，OpenLayers 3的功能模块协作...
openlayer 鼠标移动触发pointermove
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
06-18 420
注意：因为是判断要素id是不是同一个，所以当再次触发同一个id也不会发起网络请求，所以这儿使用定时器，一定时间把oldMMsi置为null。
openlayers教程openlayer点击气泡显示气泡信息/显示经纬度
最新发布
weixin_44550643的博客
07-02 152
【代码】openlayers教程openlayer点击气泡显示气泡信息/显示经纬度。
openlayers 显示点击位置的经纬度
cc1314_工作、学习有感
11-23 8140
openlayers 显示点击位置的经纬度
OpenLayers学习笔记----二.获取点击位置的经纬度
chuanren1991的博客
05-28 9146
获取点击位置的经纬度&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;link href=&q
openlayers的鼠标滚轮事件
01-15
openlayers如何启用和禁用鼠标滚轮事件。
openlayers 给数据点（散点）添加点击事件 和hover事件
q1025387665a的博客
03-19 7636
前言：由于本人也是最近才开始学习openlayers，如说明的有所不对，请在评论区指出。 1、点击事件 /** * 捕捉点击事件 */ featureClick(callback) { let _this = this; let selectPointerClick = new PointerInteraction({ handleDownEvent: function(ev){ let pixel = ev.pixel
OpenLayers实战，Openlayers获取浏览器当前用户的经纬度位置并定位到对应位置
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
06-12 1849
本篇讲一下Openlayers获取浏览器当前用户的经纬度位置并定位到对应位置，会像高德地图一样触发浏览器左上角位置权限，确认后就可以获取位置并控制地图中心点到用户所在位置。适用于Edge、firefox和移动端浏览器，pc端的chrome即使允许获取位置也会显示超时无法获取到位置。
使用OpenLayers3 添加地图鼠标右键菜单
11-22
要实现这一功能，我们需要了解OpenLayers的工作原理，并掌握如何处理鼠标事件和地图坐标转换。 首先，OpenLayers是一个用于创建交互式地图的JavaScript库。在创建地图时，通常会在HTML页面上设置一个div元素来承载...
openlayers加载瓦片地图并手动标记坐标点
04-29
在OpenLayers中，我们可以使用`ol.Feature`和`ol.geom.Point`来创建标记点，并通过`ol.layer.Vector`将其显示在地图上。以下是一个示例： 1. 创建点几何对象：首先，定义一个坐标点（以EPSG:3857投影为例）： ```...
vue-openlayers实现地图坐标弹框效果
10-14
在本文中，我们将深入探讨如何使用Vue框架与OpenLayers库结合来实现在地图上点击时显示坐标信息的弹框效果。Vue是一个流行的前端JavaScript框架，而OpenLayers则是一个功能强大的开源JavaScript库，用于创建交互式...
Openlayers实现地图全屏显示
10-14
在OpenLayers中，实现地图全屏显示是通过集成全屏控制（FullScreen Control）来完成的，这使得用户可以轻松地将地图扩展到整个浏览器窗口，提高地图的可读性和用户体验。 首先，为了使用OpenLayers库，我们需要在...
020：vue+openlayers设置显示全屏功能（示例代码）
大剑师兰特的GIS世界
08-10 1055
本示例的目的是介绍演示如何在openlayers中使添加使用全屏控件，呈现全屏和还原的效果。直接复制 vue+openlayers源代码，操作2分钟即可运行实现效果
OpenLayer-鼠标位置事件
zhushanlin的博客
04-27 112
【代码】鼠标位置事件。
openlayers如何使用（四）地图中事件的添加
可乐加冰的博客
08-23 2116
我们给整个地图都添加了点击事件，现在不管是点击点或线，我们都可以得到相关的feature，最关键的一点就是之前我们在创建点线时，一定要把他们的数据传入到feature中，要不然会有报错。这样在点击地图的时候就可以通过判断类型来对点与线元素添加不同的事件，而我们也可以通过传入的feature来获取其中的数据。我们可以单独去给他们添加事件，但我有一个更好的方法，可以同时让点和线都绑定事件。我们之前完成了地图中点线的创建，那如何给点和线去添加事件呢？通过feature中我们传入的名字来区分点与线的事件。
Vue+OpenLayers 创建地图并显示鼠标所在经纬度
L221545的博客
11-08 1169
Vue+OpenLayers 创建地图并显示鼠标所在经纬度
openlayers百度地图根据经纬度拿到实际地址
03-29
可以使用百度地图的API来实现根据经纬度拿到实际地址的功能。具体步骤如下： 1. 引入百度地图API文件 ```html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> ``` 2. 创建地图对象并添加控件 ```javascript var map = new BMap.Map("map"); // 创建地图实例 var point = new BMap.Point(lon, lat); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和缩放级别 map.addControl(new BMap.NavigationControl()); // 添加缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 ``` 3. 使用逆地址解析获取实际地址 ```javascript var geoc = new BMap.Geocoder(); geoc.getLocation(point, function(result){ if (result){ var address = result.address; // 获取解析后的地址 console.log(address); } }); ``` 完整代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度地图</title> <style type="text/css"> #map { width: 100%; height: 500px; } </style> </head> <body> <div id="map"></div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript"> var lon = 116.404; var lat = 39.915; var map = new BMap.Map("map"); // 创建地图实例 var point = new BMap.Point(lon, lat); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和缩放级别 map.addControl(new BMap.NavigationControl()); // 添加缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 var geoc = new BMap.Geocoder(); geoc.getLocation(point, function(result){ if (result){ var address = result.address; // 获取解析后的地址 console.log(address); } }); </script> </body> </html> ``` 其中，`您的密钥`需要替换成自己的百度地图密钥。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤姆猫不是猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值