使用百度地图 API 进行地理定位
Feb 25, 2017 · 2 分钟阅读

使用百度地图 API 完成地理定位

$.fn.baiduFindMe = function(options) {
  var cfgs = $.extend({
    ak: '',
    onSuccess: null,
    onError: function() {}
  }, options);

  var $el = $(this);
  var geocodingUrl = 'http://api.map.baidu.com/geocoder/v2/?callback=?&output=json&pois=1&ak=' + cfgs.ak;
  var geolocation = new BMap.Geolocation();

  geolocation.getCurrentPosition(function(r) {
    if (r.accuracy === null) {
      cfgs.onError('用户拒绝地理位置授权');
      return;
    }

    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      $.getJSON(geocodingUrl, {
          location: r.point.lat + ',' + r.point.lng
        }, function(data) {
          if (data.status === 0) {
            if (typeof cfgs.onSuccess === 'function') {
              cfgs.onSuccess(data.result);
            } else {
              $el.html(data.result.formatted_address);
            }
          }
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
          cfgs.onError(textStatus);
        });
    } else {
      cfgs.onError(this.getStatus());
    }
  });

  return this;
}

使用 html5 进行初始定位,再用百度地图 API 转换

$.fn.geoFindMe = function(options) {
  var cfgs = $.extend({
    ak: '',
    onSuccess: null,
    onError: null
  }, options);

  var $el = $(this);
  var changePositionUrl = 'http://api.map.baidu.com/geoconv/v1/?from=1&to=5&ak=' + cfgs.ak;
  var geocodingUrl = 'http://api.map.baidu.com/geocoder/v2/?callback=?&output=json&pois=1&ak=' + cfgs.ak;

  if (!navigator.geolocation) {
    showError('你的浏览器不支持地理位置');
  } else {
    navigator.geolocation.getCurrentPosition(success, showError);
  }

  function success(position) {
    var latitude = position.coords.latitude; // 纬度
    var longitude = position.coords.longitude; // 经度

    $.getJSON(changePositionUrl, {
      coords: longitude + ',' + latitude
    }, function(data) {
      if (data.status === 0) {
        $.getJSON(geocodingUrl, {
          location: data.result[0].y + ',' + data.result[0].x
        }, function(data) {
          if (data.status === 0) {
            if (typeof cfgs.onSuccess === 'function') {
              cfgs.onSuccess(data.result);
            } else {
              $el.html(data.result.formatted_address);
            }
          } else {
            showError(data.status);
          }
        });
      } else {
        showError(data.status);
      }
    });
  }

  function showError(msg) {
    if (typeof cfgs.onError === 'function') {
      cfgs.onError(msg);
    }
  }

  return this;
}
← Previous Post Next Post →

Ryun的博客
与其感慨路难行,不如马上出发。

atom css design git html javascript jekyll laravel life mac mobile optimization sublime tool vscode vue
mac

About

你好,❤朋友

这里是 Ryun 的博客 📝

📝记录了我学习 🔎的过程

作为一名前端攻城狮 🦁

希望能和大家一起 🔎

共同进步 🏃

🦁的特长:

  • HTML5
  • CSS3
  • JavaScript
  • Vue.js
  • 微信小程序
  • 熟练配合 Node.js、PHP 和 Laravel
  • 熟练使用各种开发和设计工具

🦁喜欢 🆒🆒的东西

对提升效率和美感的事物有兴趣 😋

欢迎 👏交流


see this hugo-theme-dream-ink