腾讯城市选择器

发布于 2024-05-03  230 次阅读


1. 添加插件及相关接口

1.1 开发管理-->接口设置

1.2 开发者工具,开通腾讯位置服务

1.3 添加地图选点插件

1.4 获取腾讯位置Key

1.5 给key配置额度

腾讯地图选点主要使用逆地址解析服务,给需要的功能分配额度,否则使用不了

2. 微信小程序配置

详细文档见:微信小程序插件 | 腾讯位置服务 (qq.com)

2.1 前置配置

// 添加插件 
"plugins" : {
            "citySelector" : {
                "version" : "1.0.2",
                "provider" : "wx63ffb7b7894e99ae"
            }
        }
// 获取用户权限
"permission" : {
            
            "scope.userFuzzyLocation" : {
                "desc" : "你的位置信息将用于小程序定位"
            },
        }

//权限申请
   "requiredPrivateInfos" : [
            "getLocation",
            "onLocationChange",
            "startLocationUpdateBackground",
            "chooseAddress"
        ]
    }

2.2 位置信息获取,并绑定渲染到position

// 获取地址
getPosition(){
  uni.authorize({
    scope: 'scope.userFuzzyLocation',
      success() {
        wx.navigateTo({
          url: `plugin://citySelector/index?key=QTGBZ-UXKLB-6XTUQ-NOJ2E-RN77Q-DEBND&referer='定点'`,
            })
         },
        fail: function(err) {
	  uni.showToast({
	  title: '获取定位失败',
	  icon: 'none'
	    })
	}
    })
},
// 选择城市后返回城市信息对象,若未选择返回null
citySelector(){
  const citySelector = requirePlugin('citySelector')
  const selectedCity = citySelector.getCity() 
  if(selectedCity!=null){
    this.position=selectedCity.fullname
    this.address=selectedCity.fullname
	}
}

3. 效果展示

你若盛开,清风自来;心若浮沉,浅笑安然
最后更新于 2024-09-01