admin 发表于 2024-5-25 20:15:17

微信jssdk定位详解

先看html代码:
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>微信定位</title>      
</head>
<body>
      
</body>
<!-- 这里src中前面可不加http/https -->
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
      // 此方法只有在微信中有效
      wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: '{$appid}', // 必填,公众号的唯一标识
            timestamp: {$timestamp}, // 必填,生成签名的时间戳
            nonceStr: '{$nonceStr}', // 必填,生成签名的随机串
            signature: '{$signature}',// 必填,签名
            jsApiList: ['getLocation', 'openLocation'] // 必填,需要使用的JS接口列表
      });
      // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
      wx.ready(function(){
            getLocation(openLocation);
      });
      // 获取地理位置接口
      function getLocation(callback) {
                wx.getLocation({
                        type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
                        success: function (res) {
                              var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
                              var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
                              var speed = res.speed; // 速度,以米/每秒计
                              var accuracy = res.accuracy; // 位置精度
                              // 判断返回值是否定义
                              if(callback != undefined) {
                                        callback(res);
                              }
                        }
                });
      }
      
      // 使用微信内置地图查看位置接口,创建一个方法
      function openLocation(res) {
                wx.openLocation({
                        latitude: res.latitude, // 纬度,浮点数,范围为90 ~ -90
                        longitude: res.longitude, // 经度,浮点数,范围为180 ~ -180。
                        name: '', // 位置名
                        address: '', // 地址详情说明
                        scale: 15, // 地图缩放级别,整形值,范围从1~28。默认为最大
                        infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
                });
      }      
</script>
</html>微擎实际操作:
<script>
wx.ready(function(){
      wx.getLocation({
      type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
      success: function (res) {
            var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
            var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
            var speed = res.speed; // 速度,以米/每秒计
            var accuracy = res.accuracy; // 位置精度
                  var qqmapkey = "{php echo $this->module['config']['qqmapkey']}";
            $.ajax({
                      url:"http://apis.map.qq.com/ws/geocoder/v1/?location=" +latitude+ "," +longitude+ "&coord_type=5&key=" + qqmapkey + "&output=jsonp&callback=calllocation" ,
                type:"GET",
                dataType:'jsonp',
                jsonp:'calllocation'
            });
      },
      cancel: function (res) {
             alert('您拒绝了我们的位置请求!');
      }
    });
         
});
function calllocation(data){
    //var name=data.result.formatted_addresses.rough;
          var name = data.result.address_component.street;
    var address=data.result.formatted_addresses.recommend;
    var lat=data.result.location.lat;
    var lng=data.result.location.lng;
          var city=data.result.address_component.city;
    alert("我的城市:" + city);
    wx.openLocation({
      latitude: lat, // 纬度,浮点数,范围为 90 ~ -90
      longitude: lng, // 经度,浮点数,范围为 180 ~ -180 。
      name: name, // 位置名
      address: address, // 地址详情说明
      scale: 18, // 地图缩放级别 , 整形值 , 范围从 1~28 。默认为最大
      infoUrl: '' // 在查看位置界面底部显示的超链接 , 可点击跳转
    });
}
</script>腾讯地址https://lbs.qq.com/webservice_v1/guide-gcoder.html

页: [1]
查看完整版本: 微信jssdk定位详解