微信小程序[电商]-集成腾讯地图实现定位功能

痛定思痛。 2023-02-28 01:47 266阅读 0赞

# 效果展示 #

> 通过腾讯地图的经纬度转换接口将小程序中获取的经纬度转为具体的地址显示在界面上。

![在这里插入图片描述][20200719231536482.png]

# 地图集成 #

> 在腾讯地图的开发者页面注册应用获取`key`

申请地址：[申请密钥][Link 1]  
填写相关信息后生成 `key`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]  
我这里已经创建好了，复制下面的 `key`到微信小程序的`js`代码中发送请求即可返回当前定位的经纬度坐标，最后根据 [坐标拾取器][Link 2] 将经纬度转为具体的地址信息：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]

# 展示位置 #

`home.wxml`的布局代码如下：

> `address` 表示地址信息，`searchTip` 表示搜索框的提示信息

<view class="location-style">
    	<view class="location-text" catchtap="retryGetLocation">{
       {address}}</view>
    	<view class="search-view" catchtap="toSearchPage">{
       { searchTip }}</view>
    </view>

`home.js`的逻辑处理主要代码如下：

> 在 `onload`中通过 `wx.getLocation`获取当前位置的经纬度数据，在通过地址坐标拾取器转换为具体的地址，最后使用`setData`刷新地址数据展示在布局中。

onLoad: function () { 
        that = this
        // 获取定位信息
        that.getLocation()
      },
    
      getLocation: function () { 
        wx.getLocation({ 
          type: 'wgs84',
          success(res) { 
            var latlon = res.latitude + "," + res.longitude;
            that.addressTranslation(latlon)
          }
        })
      },
      addressTranslation: function (latlon) { 
        wx.request({ 
          url: 'http://apis.map.qq.com/ws/geocoder/v1/?l&get_poi=1',
          data: { 
            "key": "在腾讯地图申请的 应用key",
            "location": latlon
          },
          method: 'GET',
          success: function (res) { 
            // success，模拟器会有误差，在真机上不会
            console.log("返回的地址:" + res.data.result.address);
            that.setData({ 
              address: res.data.result.address
            })
          },
          fail: function () { 
            // fail
            that.setData({ 
              address: "定位失败，点击重试"
            })
          },
    
        })
      },
    
      retryGetLocation: function () { 
        // 点击重新获取定位信息
        that.getLocation()
      },

参考：

*  [API-位置][API-]
 *  [服务平台-地图][-]
 *  [更丰富的功能][Link 3]
 *  [坐标拾取器][Link 2]

# 上车 #

> 佛系原创号主，主要分享 Flutter、微信小程序、Android相关知识点。  
> ![在这里插入图片描述][20200528213904480.jpg]

[20200719231536482.png]: /images/20230209/8b6a17d311c34c93ac089edd1388b51e.png
[Link 1]: https://lbs.qq.com/dev/console/key/add
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20230209/2a1f1ea660fe4dfbb5c2491667ace9d9.png
[Link 2]: https://lbs.qq.com/service/webService/webServiceGuide/webServiceGcoder
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: /images/20230209/49015312066542eaae0773623bb961e5.png
[API-]: https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
[-]: https://developers.weixin.qq.com/miniprogram/dev/extended/service-market/intro.html#%E5%9C%B0%E5%9B%BE
[Link 3]: https://lbs.qq.com/miniProgram/plugin/pluginGuide/pluginOverview
[20200528213904480.jpg]: https://img-blog.csdnimg.cn/20200528213904480.jpg