前端获取用户位置信息

2018-06-29  本文已影响0人  刘圣凯

使用百度地图获取用户当前信息,首先需要申请ak密匙,申请之后引入依赖的js文件,注意httphttps都可以,看你需求自己引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ak密匙"></script>
<script type="text/javascript" src="https://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

接着就是下面的代码了

GetLocation() {
    //声明两个变量,用于存储经度纬度
    var longitude, latitude;
    //通过H5的方式获取到经纬度,存储经纬度
    navigator.geolocation.getCurrentPosition(function(position) {
      longitude = position.coords.longitude;
      latitude = position.coords.latitude;
    });
    //调用百度api转化经纬度
    var gpsPoint = new BMap.Point(longitude, latitude);
    BMap.Convertor.translate(gpsPoint, 0, function(point) {
      var geoc = new BMap.Geocoder();
      //拿到位置信息
      geoc.getLocation(point, function(rs) {
        var addComp = rs.addressComponents;
        alert(
          addComp.province +
            ", " +
            addComp.city +
            ", " +
            addComp.district +
            ", " +
            addComp.street +
            ", " +
            addComp.streetNumber
        );
      });
    });
  }

下面这段是更为友好的获取经纬度的写法

getlocation() {
      let vm = this;
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          //存储经纬度
          vm.longitude = position.coords.longitude;
          vm.latitude = position.coords.latitude;
          //调用百度API接口GET POSITION
          var gpsPoint = new BMap.Point(vm.longitude, vm.latitude);
          BMap.Convertor.translate(gpsPoint, 0, function(point) {
            var geoc = new BMap.Geocoder();
            geoc.getLocation(point, function(rs) {
              var addComp = rs.addressComponents;
              alert(
                addComp.province +
                  ", " +
                  addComp.city +
                  ", " +
                  addComp.district +
                  ", " +
                  addComp.street
              );
            });
          });

-------------------------------------------更新----------------------------------------------------------------
以上方式获取位置不支持https, 不过由于IOS10以上获取经纬度只支持https,为了同时兼容IOS和安卓,建议使用腾讯的API,
教程点此进入

上一篇 下一篇

猜你喜欢

热点阅读