1.1 腾讯位置服务地图选点

1. 打开微信服务平台，点我跳转

2. 选择 开发者资源
   

3.选中插件后，搜索地图选点 。然后就得到我们要的腾讯位置服务地图选点插件。

4. 点击添加插件，然后选择要使用插件的小程序。
   
   

5. 在所选小程序后台，设置==>第三方设置==>插件管理中就可以看到刚刚添加的插件。
   

6. 使用刚刚添加的插件。

   6.1 在app.json中添加如下配置：

   // app.json
   {
     "plugins": {
       "chooseLocation": {
         "version": "1.0.9",
         "provider": "wx76a9a06e5b4e693e" // 这里的provider的值，是插件提供者的appid，我们保持不变，不需要修改
       }
     }
   }
   

   6.2 设置定位授权

   地图选点插件需要小程序提供定位授权才能够正常使用定位功能：

   // app.json
   {
     "permission": {
       "scope.userLocation": {
         "desc": "你的位置信息将用于小程序定位"
       }
     }
   }
   

   6.3 在页面中使用

   <!-- dmeo.wxml -->
   <view>位置信息： {{ address.address }}  </view>
   <button type="primary" bindtap="chooseAddress">选取位置</button>
   

   用一个view展示选中的位置，点击按钮跳转到选点页面

   // 导入插件
   const chooseLocation = requirePlugin('chooseLocation');
   Page({
     data: {
       address: {},//选点后的位置地址信息
       location: {} // 定位信息
     },
     onLoad() {
       var that = this
       wx.getLocation({
         success(res) {
           that.setData({
             location: res
           })
         }
       })
     },
     // 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
    onShow() {
       const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
       console.log("location==>",location);
       if(location !=null){
         this.setData({
           address:location
         })
       }
     },
     chooseAddress() {
       const key = 'BWXBZ-XEPCP-CPDDE-LGMUD-BW27S-LCFHX'; //使用在腾讯位置服务申请的key,如果不清楚如何申请，请回顾我们的小程序基础教程
       const referer = 'demo'; //调用插件的app的名称
       const location = JSON.stringify({
         latitude: this.data.location.latitude, // 纬度
         longitude: this.data.location.longitude // 经度
       });
       // 自定义分类
       const category = '教育培训,休闲娱乐，停车场';
       wx.navigateTo({
         url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
       });
     }
   })
   

7. 最终效果：
   

1.2 腾讯位置服务城市选择器

城市选择器的用法与地图选点的用法几乎是一般的，引入步骤参考地图选地的前五步骤。直接看如何在页面中使用：

1. 在app.json文件如添加如下配置：

   // app.json
   {
     "plugins": {
       "chooseLocation": { // 这个是上一个的选点插件
         "version": "1.0.9",
         "provider": "wx76a9a06e5b4e693e"
       },
       "citySelector": { // 城市选择插件
         "version": "1.0.1",
         "provider": "wx63ffb7b7894e99ae"
       }
     },
     "permission": {
       "scope.userLocation": {
         "desc": "你的位置信息将用于小程序定位" 
       }
     },
   }
   

2. 在页面中使用：

   <!--wxml -->
   <view>选择的城市：{{city.name}}</view>
   <button type="primary" bindtap="goChooseCity">选择城市</button>
   

   // 引入插件
   const citySelector = requirePlugin('citySelector');
   Page({
     data: {
       city: '' //选中的城市
     },
     // 从城市选择器插件返回后，在页面的onShow生命周期函数中能够调用插件接口，获取cityInfo结果对象
     onShow() {
       const selectedCity = citySelector.getCity(); // 选择城市后返回城市信息对象，若未选择返回null
       console.log("selectedCity===",selectedCity);
       if(selectedCity!=null){
         this.setData({
           city:selectedCity
         })
       }
     },
     onUnload() {
       // 页面卸载时清空插件数据，防止再次进入页面，getCity返回的是上次的结果
       citySelector.clearCity();
     },
     goChooseCity() {
       const key = 'BWXBZ-XEPCP-CPDDE-LGMUD-BW27S-LCFHX'; // 使用在腾讯位置服务申请的key
       const referer = 'demo'; // 调用插件的app的名称
       const hotCitys = ''; // 用户自定义的的热门城市
   
       wx.navigateTo({
         url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
       })
     }
   })
   

3. 最终效果：