H5页面js网页定位

最新推荐文章于 2024-11-15 13:54:42 发布

m0_56363729

最新推荐文章于 2024-11-15 13:54:42 发布

阅读量1.4k

点赞数

文章标签：前端 https javascript

本文链接：https://blog.csdn.net/m0_56363729/article/details/128851567

版权

获取地址位置方式：
1：webapi提供getCurrentPosition接口，在https域名的网页中可以使用。
文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/getCurrentPosition

getLocation() {
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      // 获取成功
      console.debug(position);
    }, function(err){
      // 获取失败
      console.debug(err);
    });
  } else {
    console.debug('不支持获取GPS地理位置');
  }
}

在不支持该功能的情况的错误处理参考：
可参考文档：

https://www.jianshu.com/p/1652ea347a12

2、高德地图jsapi定位
注意高德jsapi有2个版本的jsapi。推荐使用v2.0
在这里插入图片描述

v2.0版本

https://lbs.amap.com/api/jsapi-v2/summary

npm方式

npm i @amap/amap-jsapi-loader --save

也可以采用script引入，但是可能会导致eslint报错提示AMap不存在
需要使用https的域名访问，否则1.0版本的手机上会提示错误不进行定位，2.0版本提示错误但是会自动使用ip定位。
1.0版本在手机上：非https。
在这里插入图片描述

2.0版本手机上，非https虽然提示地理位置没有权限，但是会自动使用ip定位。
在这里插入图片描述

示例：注意：不知道是否因为不是https域名的原因，这里只生效了ip定位。一是定位精度有偏差，网上说的转换纠正方法，比如这个文档提到的方式没什么作用，矫正的位置也不对。

https://blog.csdn.net/weixin_31642531/article/details/111968735

。二是定位结果未返回详细地址，这时可通过官方文档提供方法转换。1.0版本倒是在web端不用https的情况下也可以返回详细地址。
比较：基本可以确认是需要使用https才可以获取到更精确的结果，但还是会有大概几十米的偏移。下图是使用vue cli配置无证书的https开头的域名网页，在手机浏览器上可以强行选择信任来访问测试。
在这里插入图片描述

<template>
  <div class="testMap">
    <div id="container" tabindex="0"></div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'testMap',
  data () {
    return {
      map: null
    }
  },
  mounted () {
    const Vm = this
    this.$nextTick(function () {
      console.log('window.AMap', window.AMap)
      Vm.loadMap()
    })
  },
  methods: {
    // npm引入
    async loadMap () {
      try {
        const Vm = this
        console.log(222)
        // console.log(MapLoader, '2233')
        const AMap = await AMapLoader.load({
          key: '751f08771787ae430d463585d4897a41', // 申请好的Web端开发者Key，首次调用 load 时必填
          version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: ['Map.ToolBar'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
        console.log(AMap, '333')
        if (AMap) {
          Vm.map = new AMap.Map('container', {
            resizeEnable: true
          })
          AMap.plugin('AMap.Geolocation', function () {
            var geolocation = new AMap.Geolocation({
              enableHighAccuracy: true, // 是否使用高精度定位，默认:true
              timeout: 10000, // 超过10秒后停止定位，默认：5s
              position: 'RB', // 定位按钮的停靠位置
              buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
              zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
            })
            Vm.map.addControl(geolocation)
            geolocation.getCurrentPosition(function (status, result) {
              if (status === 'complete') {
                // const res = GPS.gcj_encrypt(result.position.lat, result.position.lng)
                // console.log(res, 'gcj_encrypt')
                onComplete(result)
                if (result.formattedAddress) {
                  return
                }
                // 如果定位结果不含有详细地址则可以通过获取城市码以及逆向地理编码方法转换具体地址
                AMap.plugin('AMap.CitySearch', function () {
                  var citySearch = new AMap.CitySearch()
                  citySearch.getLocalCity(function (status2, result2) {
                    if (status2 === 'complete' && result2.info === 'OK') {
                      // 查询成功，result即为当前所在城市信息
                      console.log(result2, '333')
                      AMap.plugin('AMap.Geocoder', function () {
                        var geocoder = new AMap.Geocoder({
                          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                          city: result2.adcode || result2.citycode
                        })
                        const lnglat = [result.position.lng, result.position.lat]
                        geocoder.getAddress(lnglat, function (status3, result3) {
                          if (status3 === 'complete' && result3.info === 'OK') {
                            // result为对应的地理位置详细信息
                            console.log(result3, 'result3')
                          }
                        })
                      })
                    }
                  })
                })
              } else {
                onError(result)
              }
            })
            // 解析定位结果
            function onComplete (data) {
              console.log(data, 'onComplete')
            }
            // 解析定位错误信息
            function onError (data) {
              console.log(data, 'onError')
            }
          })
        } else {
          this.$message.error('地图加载失败')
        }
      } catch (error) {
        console.log(error)
      }
    }
    // 直接引入方式
    // async loadMap () {
    //   const Vm = this
    //   // eslint-disable-next-line no-undef
    //   Vm.map = new AMap.Map('container', {
    //     resizeEnable: true
    //   })
    //   Vm.map.plugin('AMap.ToolBar', function () {
    //     // eslint-disable-next-line no-undef
    //     var toolbar = new AMap.ToolBar()
    //     Vm.map.addControl(toolbar)
    //   })
    //   Vm.map.plugin('AMap.Geolocation', function () {
    //     // eslint-disable-next-line no-undef
    //     var geolocation = new AMap.Geolocation({
    //       enableHighAccuracy: true, // 是否使用高精度定位，默认:true
    //       timeout: 10000, // 超过10秒后停止定位，默认：5s
    //       position: 'LB', // 定位按钮的停靠位置
    //       // eslint-disable-next-line no-undef
    //       buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
    //       zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
    //     })
    //     Vm.map.addControl(geolocation)
    //     geolocation.getCurrentPosition(function (status, result) {
    //       if (status === 'complete') {
    //         onComplete(result)
    //       } else {
    //         onError(result)
    //       }
    //     })
    //     // 解析定位结果
    //     function onComplete (data) {
    //       console.log(data, 'onComplete')
    //     }
    //     // 解析定位错误信息
    //     function onError (data) {
    //       console.log(data, 'onError')
    //     }
    //   })
    // }
  }
}
</script>
<style lang="scss">
.testMap {
  height: 100vh;
  #container {
    width: 100%;
    height: 100%;
  }
}
</style>