H5浏览器获取定位

3,115 阅读3分钟

共有三种方式可以获取定位

1.通过浏览器自带的方法获取

// if (navigator.geolocation) {
//   navigator.geolocation.getCurrentPosition(onSuccess, onError)
// } else {
//   // alert("您的浏览器不支持使用HTML 5来获取地理位置服务");
//   getpagelistdata('', '')
// }
  
// //定位数据获取成功响应
// function onSuccess(position) {
//   var longitude = position.coords.longitude
//   var latitude = position.coords.latitude
//   getpagelistdata(longitude, latitude)
// }
// //定位数据获取失败响应
// function onError(error) {
//   getpagelistdata('', '')
// }

2.若为微信浏览器同时配置相应的jdk之后,可以通过自带的方式获取

wx.config({
  appId: configdata.appId// 必填,公众号的唯一标识
  timestamp: configdata.timestamp// 必填,生成签名的时间戳
  nonceStr: configdata.nonceStr// 必填,生成签名的随机串
  signature: configdata.signature// 必填,签名
  // 必填,需要使用的JS接口列表
  jsApiList: [
    'updateAppMessageShareData',
    'wx-open-launch-app',
    'updateTimelineShareData',
    'getLocation'
  ],
  // 可选,获取开放标签权限
  openTagList: ['wx-open-launch-app'],
})
wx.ready(function () {
  wx.updateAppMessageShareData({
    title: shareTitlephone, // 分享标题
    desc: descContent, // 分享描述
    link: lineLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: imgUrl, // 分享图标
    successfunction () {},
    cancelfunction () {
      // 用户取消分享后执行的回调函数
    },
  })
  wx.updateTimelineShareData({
    title: shareTitle, // 分享标题
    desc: descContent, // 分享描述
    link: lineLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: imgUrl, // 分享图标
    successfunction () {},
    cancelfunction () {
      // 用户取消分享后执行的回调函数
    },
  })
  
    wx.getLocation({
      type"gcj02",
      successfunction (res) {
        latitude = res.latitude;
        longitude = res.longitude;
        getpagelistdata(longitude,latitude);
      },
      cancelfunction (res) {
        getpagelistdata("","");
        //  alert("定位失败,权限不足")
      },
    });
})

通过高德插件获取,此方法适用于PC端

引入高德定位jdk

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.1&key=*****"></script>

html

<div id="container" style="display: none;"></div>

js

前端高德地图定位
function baiduapigetaddress(){
    var map = new AMap.Map('container', {
        resizeEnabletrue
      });
      //定位
      map.plugin('AMap.Geolocation', function() {
        geolocation = new AMap.Geolocation({
          enableHighAccuracytrue, //是否使用高精度定位,默认:true
          timeout10000, //超过10秒后停止定位,默认:无穷大
          noIpLocate0,
          maximumAge0, //定位结果缓存0毫秒,默认:0
          converttrue, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
          showButtonfalse, //显示定位按钮,默认:true
          buttonPosition'LB', //定位按钮停靠位置,默认:'LB',左下角
          buttonOffsetnew AMap.Pixel(1020), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(1020)
          showMarkerfalse, //定位成功后在定位到的位置显示点标记,默认:true
          showCirclefalse, //定位成功后用圆圈表示定位精度范围,默认:true
          panToLocationfalse, //定位成功后将定位到的位置作为地图中心点,默认:true
          zoomToAccuracyfalse //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
        AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
      });
      function onComplete(data{
        var xcity = data.addressComponent.city; //定位的城市名称
        var province = data.addressComponent.province;//定位的城市名称
        var district = data.addressComponent.district; //定位的城市名称
        var localaddressmess = data.formattedAddress; //定位的城市名称
        localaddress=province+xcity+district;
        // $("#localaddress").val(localaddress);
        // $("#localaddressmess").val(localaddressmess);
        //    recorduseridaddress();
        //经纬度
        var lng = data.position.getLng()
        var lat = data.position.getLat()
        if(lng=="" || lat==""){
          getpagelistdata(lng,lat);
        }else{
          getpagelistdata("","");
        }
      }
      //解析定位错误信息
      function onError(data{
        //  alert("定位失败")
        getpagelistdata("","");
        var xcity = "" //在这里可以添加一个默认城市,在定位出错之后使用此默认城市(或者返回定位出错)
      }
}