如何获取浏览器定位信息存储到浏览器缓存中?

简介: 如何获取浏览器定位信息存储到浏览器缓存中

1:获取浏览器定位信息存储到浏览器缓存

因为在获取定位时,在不同的浏览器中返回的地理位置信息格式有所不同。火狐浏览器和谷歌浏览器使用的定位服务提供商和算法也可能不同,这导致了不同的结果。

  mounted() {
    // 获取地理位置
    var geolocation = new BMapGL.Geolocation()
    // 判断浏览器类型
    var ua = navigator.userAgent.toLowerCase()
    var isFirefox = ua.indexOf('firefox') !== -1
    var isChrome = ua.indexOf('chrome') !== -1 && ua.indexOf('safari') !== -1
    geolocation.getCurrentPosition(function(r) {
      if (this.getStatus() === BMAP_STATUS_SUCCESS) {
        const province = r.address.province
        let city = r.address.city
        const district = r.address.district
        const street = r.address.street
        // 处理火狐浏览器返回的地理位置信息格式
        if (isFirefox) {
          city = r.address.city
        }
        // 处理谷歌浏览器返回的地理位置信息格式
        if (isChrome) {
          if (city === '市辖区' || city === '县') {
            city = r.address.province + r.address.district
          }
        }
        console.log('=======', province)
        console.log('=======', city)
        console.log('=======', district)
        console.log('=======', street)
        alert(province + city + district + street)
        localStorage.setItem('location', province.trim() + ' ' + city.trim() + ' ' + district.trim() + ' ' + street.trim())
      }
    })
  },

在:isFirefox中:

8bd682a437064261a5961f6abd6d9597.png

在:isChrome

6ced5b647e5f41648e1a9d64076a2973.png

目录
打赏
0
0
0
0
8
分享
相关文章
数据的存储--Redis缓存存储(一)
数据的存储--Redis缓存存储(一)
202 1
数据的存储--Redis缓存存储(二)
数据的存储--Redis缓存存储(二)
87 2
数据的存储--Redis缓存存储(二)
Redis 是一个高性能的键值对存储系统,常用于缓存、消息队列和会话管理等场景。
【10月更文挑战第4天】Redis 是一个高性能的键值对存储系统,常用于缓存、消息队列和会话管理等场景。随着数据增长,有时需要将 Redis 数据导出以进行分析、备份或迁移。本文详细介绍几种导出方法:1)使用 Redis 命令与重定向;2)利用 Redis 的 RDB 和 AOF 持久化功能;3)借助第三方工具如 `redis-dump`。每种方法均附有示例代码,帮助你轻松完成数据导出任务。无论数据量大小,总有一款适合你。
118 6
浏览器的缓存方式几种
浏览器缓存方式主要包括:1. **强制缓存**,通过 `Expires` 或 `Cache-Control` 控制,缓存有效期内不发起请求;2. **协商缓存**,使用 `ETag` 和 `Last-Modified` 判断资源是否更新;3. **Service Worker 缓存**,适用于 PWA 应用,拦截并返回缓存;4. **浏览器存储**,如 LocalStorage、SessionStorage 和 IndexedDB,用于持久化或会话级数据存储;5. **Push Cache**,仅限 HTTP/2,服务器主动推送资源。选择合适的缓存策略可优化性能和用户体验。
109 16
【Azure Redis 缓存】关于Azure Cache for Redis 服务在传输和存储键值对(Key/Value)的加密问题
【Azure Redis 缓存】关于Azure Cache for Redis 服务在传输和存储键值对(Key/Value)的加密问题
109 2
如何利用浏览器的缓存来优化网站性能?
【10月更文挑战第23天】通过以上多种方法合理利用浏览器缓存,可以显著提高网站的性能,减少网络请求,加快资源加载速度,提升用户的访问体验。同时,要根据网站的具体情况和资源的特点,不断优化和调整缓存策略,以适应不断变化的业务需求和用户访问模式。
316 63
如何设置浏览器的缓存策略?
【10月更文挑战第23天】通过合理地设置浏览器的缓存策略,可以在提高网页性能、减少网络流量的同时,确保用户能够获取到最新的内容,从而提升用户体验和网站的性能优化效果。
454 60
vue2知识点:浏览器本地缓存
vue2知识点:浏览器本地缓存
76 2
取接口访问者信息[IP,浏览器,操作系统]免费API接口教程
此API用于获取访问者的IP地址、浏览器和操作系统信息,支持70多种浏览器和操作系统。通过POST或GET请求至`https://cn.apihz.cn/api/ip/getapi.php`,需提供用户ID和KEY。返回结果包括状态码、消息、IP、浏览器和操作系统信息。示例:{"code":200,"ip":"175.154.88.178","browser":"Chrome","os":"Windows 10"}。详情见官网文档。
大数据-71 Kafka 高级特性 物理存储 磁盘存储特性 如零拷贝、页缓存、mmp、sendfile
大数据-71 Kafka 高级特性 物理存储 磁盘存储特性 如零拷贝、页缓存、mmp、sendfile
138 3
下一篇
oss创建bucket
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等