OpenLayers实战，Openlayers获取浏览器当前用户的经纬度位置并定位到对应位置

原创 已于 2023-08-02 17:45:53 修改 · 2.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#javascript #vue.js #OpenLayers #获取浏览器定位 #获取用户经纬度

于 2023-06-12 22:00:46 首次发布
本文介绍如何使用OpenLayers在Vue项目中获取浏览器用户的经纬度，并将地图中心点定位到用户位置。详细讲解了依赖安装、功能实现及代码示例，适用于Edge、Firefox和移动端浏览器。

专栏目录：
OpenLayers实战进阶专栏目录

前言

本篇讲一下Openlayers获取浏览器当前用户的经纬度位置并定位到对应位置，会像高德地图一样触发浏览器左上角位置权限，确认后就可以获取位置并控制地图中心点到用户所在位置。
适用于Edge、firefox和移动端浏览器，pc端的chrome即使允许获取位置也会显示超时无法获取到位置。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.1
了解本专栏 订阅专栏 解锁全文
020：vue+openlayers设置显示全屏功能（示例代码）
大剑师兰特的GIS世界
08-10 1515
本示例的目的是介绍演示如何在openlayers中使添加使用全屏控件，呈现全屏和还原的效果。直接复制 vue+openlayers源代码，操作2分钟即可运行实现效果
OpenLayers实战，OpenLayers获取用户定位位置并高亮显示用户所在行政区划
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
10-26 956
本篇文章通过国内的省、自治区和直辖市的GeoJson数据作为行政区划边界数据，然后根据用户定位位置，通过OpenLayers计算得到用户所在行政区划，并使用OpenLayers高亮显示用户所在行政区划边界。本章是综合应用场景，所以代码稍稍有些复杂，对于新入门读者可能难以上手，因此下面提供本文中使用到的技术，方便大家拆分参考，容易上手：加载GeoJson数据渲染行政区划边界参考文章OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上。
用Openlayers实现实时定位
01-19
小马看Gis--用Openlayers实现实时定位 服务端服务方法用来生成GeoJSon串的jar包的源文件。
openlayers4实现地图POI信息检索和定位显示功能
weixin_46446476的博客
02-24 2125
openlayers4实现地图POI信息检索和定位显示功能
小马看Gis--通过Openlayers实现实时定位
热门推荐
不知道是谁的博客
01-19 2万+
通过Openlayers实现实时定位
OpenLayers学习笔记----二.获取点击位置的经纬度
chuanren1991的博客
05-28 9436
获取点击位置的经纬度<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href=&q
Vue+OpenLayers6实战进阶专栏目录，Vue+OpenLayers实战案例，Vue+OpenLayers6实战教程
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
07-31 2582
本篇作为Vue整合OpenLayers实战进阶教程的目录，用于整理汇总专栏所有文章，方便查找。本专栏是讲解主流前端框架Vue整合前端最流行的JS二维地图引擎之一OpenLayers的实战教程。
适合GIS专业学生和前端webgis小白快速上手的Vue+OpenLayers6入门到实战教程，OpenLayers6中文文档手册
最新发布
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
04-23 2131
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
10-31 4932
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
Openlayers 教程 12 - 地图中的各种定位：定位点、线、面以及图层等
非科班Java出身GISer的博客
03-17 6979
地图定位是非常常用的功能，本教程介绍定位到点、范围、图形要素 feature、图层 layer。
Openlayers显示地理位置坐标的方法
10-14
主要为大家详细介绍了Openlayers显示地理位置坐标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
080：vue+openlayers 获取使用者当前的地理位置
大剑师兰特的GIS世界
08-22 1502
本示例的目的是介绍演示如何在vue+openlayers中如何使用geoLocation定位使用者当前的位置。
openlayers学习——6、openlayers地块定位点定位
记录生活点滴
01-11 4934
openlayers添加GeoJSON 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。 本人不是专业GIS开发，只是记录，方便后续查找。 参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector 地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint
openlayers：实现地理位置搜索定位（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 617
openlayers：实现地理位置搜索定位（附完整源码）
openlayers：实现地理定位（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-31 404
openlayers：实现地理定位（附完整源码）
openlayers 入门教程（十二）：定位与轨迹
大剑师兰特的GIS世界
04-11 4094
在OpenLayers中实现定位和轨迹的功能通常涉及到地图上的点标记（Marker）动态更新位置以及记录和显示轨迹路径。
Openlayers实战：点击某点，overlay显示经纬度坐标
大剑师兰特的GIS世界
07-09 1072
在之前的实战中，我们在某个固定的位置， 今天改变一种形式，即采用overlay的方式，点击某处，获得到经纬度坐标，显示在overlay层上面。
Vue+Openlayer实现实时定位
08-31 1203
参考：https://blog.csdn.net/weixin_39340061/article/details/108196570 效果图： 实现代码： <template> <div id="map" style="width: 100vw; height: 100vh"></div> </template> <script> import "ol/ol.css"; import GeoJSON from "ol/for
OpenLayers6实战，OpenLayers获取移动端精确定位，OpenLayers适配App混合H5方式调用手机定位位置并定位到指定点
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
08-04 1077
本章讲解OpenLayers如何获取移动端精确定位位置。不使用任何native本地方法，只使用纯js实现。本篇文章适用于App混合H5方式调用手机精确定位，打包时需要选择GPS位置权限，手机获取定位过程中会弹出是否允许定位的权限提示。
openlayers获取用户获取用户当前详细地理位置
03-29
OpenLayers本身不能直接获取用户的详细地理位置，但可以使用浏览器的Geolocation API来获取用户的经纬度坐标，然后使用第三方的地理信息服务（如OpenStreetMap、Google Maps等）来获取用户的详细地理位置。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值