网页端&小程序的前端note：QQMapWX定位的使用_qqmap-wx-jssdk只能微信小程序用么-CSDN博客

本文链接：https://blog.csdn.net/qq_38522539/article/details/81035353

本文介绍了如何在网页端和小程序中使用QQMapWX的定位功能。首先需要从微信官网获取qqmap-wx-jssdk.js文件，并注意region属性必须为数组且有默认值以确保在请求失败时仍能正常工作。在业务逻辑中，需要引入地图JS文件以实现定位服务，网页端的具体实现留作后续补充。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用前请前往微信官网下载qqmap-wx-jssdk.js文件
由于region数组在业务系统中对应的是属性，本人进行一些逻辑处理

注意事项：
1 value只能是region，改了就无效
2 region只能是数组
3 必须要有默认值才能使用，若请求失败，提供默认值

<view class="l-ship-addr edit-field" id="distpicker1">
    <text>收货地址：</text>
     <picker mode="region" name="addressRegion" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
       <view class="picker">
        {{region[0]}}，{{region[1]}}，{{region[2]}}
        </view>
     </picker>
</view>

在业务js文件中引入地图js文件

var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
 /**
   * 监听定位到当前位置 给省市区默认值
   */
  listenerBtnGetLocation: function () {
    // 实例化腾讯地图API核心类
    qqmapsdk = new QQMapWX({
      key: 'RI5BZ-RFVRU-G3VVI-2M24V-36YLZ-POFQM' // 必填
    });
    var that = this
    var regionWX=[];
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        //2、根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
        qqmapsdk.reverseGeocoder({
          success: function (res) {
            regionWX[0] = res.result.address_component.province;
            regionWX[1] = res.result.address_component.city;
            regionWX[2] = res.result.address_component.district;
            that.setData({
              region: regionWX
            })
          },
          fail: function (res) {
            console.log(res);
          },
          complete: function (res) {
            console.log(res);
          }
        })

      },
      fail: function (err) {
        that.setData({
          region: ['广东省', '广州市', '海珠区']
        })
        console.log(err)
      },
      complete: function (info) {
        console.log(info)
      }
    })
  },

网页端待补充