微信js-sdk地理位置接口用法示例

下面我会分为几个部分讲解“微信js-sdk地理位置接口用法示例”的完整攻略。

一、前置条件

在使用微信js-sdk地理位置接口之前，需要确保以下几个条件已经满足：

已经在微信公众平台中配置了JS接口安全域名。
已经在页面中引入微信公众平台提供的js文件（如：http://res.wx.qq.com/open/js/jweixin-1.4.0.js）。
已经申请了JS接口的权限，具体可以查看官方文档。

二、获取地理位置

获取用户的地理位置可以通过wx.getLocation()接口来实现。该接口会弹出一个获取位置的确认框，用户可以选择是否授权。

wx.getLocation({
    type: 'wgs84',
    success: function(res) {
        var latitude = res.latitude; // 纬度
        var longitude = res.longitude; // 经度
        var speed = res.speed; // 速度，以米/每秒计
        var accuracy = res.accuracy; // 位置精度
    }
});

其中，type表示坐标类型，目前支持wgs84和gcj02两种类型。success表示获取位置成功的回调函数，res参数包含了获取到的位置信息。

三、使用地图

在获取到用户的位置之后，我们可以使用微信提供的地图组件来展示用户的位置。下面是一个使用微信地图组件的示例代码。

// 引入微信地图组件
var mapObj = new wx.createMapContext('map');

// 显示用户位置
mapObj.moveToLocation();

// 添加标记点
mapObj.addMarkers([{
  id: 0,
  latitude: 23.099994,
  longitude: 113.324520,
  iconPath: "/resources/others.png",
  width: 50,
  height: 50
}]);

// 点击标记点事件处理函数
mapObj.bindMarkerTap(function(e) {
  console.log(e.markerId);
});

其中，首先需要引入微信地图组件（通过wx.createMapContext('map')来创建地图对象），然后通过moveToLocation方法将地图移到用户的位置，接着使用addMarkers来添加标记点并且设置标记点的图标、宽度和高度等属性，最后通过bindMarkerTap来监听用户的点击事件。