凤阳 發表於 2021-4-30 12:23:00

小白入门必看 ‘’微信小程序地图定位开发教程‘’

<h2 id="前言">前言</h2>
<p>目前腾讯位置服务提供路线规划、地图选点、地铁图、城市选择器插件四款插件产品，本篇博客主要针对地图选点功能进行实现。</p>
<h2 id="开通腾讯位置服务">开通腾讯位置服务</h2>
<p>1、进入微信公众平台</p>
<p>2、登录进入小程序后台，选择 “开发 - 开发工具 - 腾讯位置服务”</p>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95cb58305f01459d89940d03528319ab~tplv-k3u1fbpfcp-watermark.image"></p>
<p>3、点击 “开通”，进入授权扫码界面</p>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51b85d6bd03b43d28460081f805dfd28~tplv-k3u1fbpfcp-watermark.image"></p>
<p>4、使用微信扫码进行授权</p>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7dd22e3a98e24b61bbfcbabf693ad642~tplv-k3u1fbpfcp-watermark.image"></p>
<p>5、绑定开发者账号</p>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d820d9dc22e4f34b34b9f4c54f97e50~tplv-k3u1fbpfcp-watermark.image"></p>
<h2 id="接入插件">接入插件</h2>
<p>1、在小程序后台，选择 “设置 - 第三方设置 - 插件管理”，点击 “添加插件”</p>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d50890d7ea54458b6fe8aec3e8bd8ee~tplv-k3u1fbpfcp-watermark.image"></p>
<p>2、搜索 “腾讯位置服务地图选点” 进行添加</p>
<p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a722816cc6fb4e8f95ce7f9c399892fa~tplv-k3u1fbpfcp-watermark.image"></p>
<h2 id="开发者密钥配置">开发者密钥配置</h2>
<p>1、申请开发者密钥</p>
<p>2、设置KEY的 “启用产品”</p>
<p>a、勾选微信小程序，设置授权 APP ID</p>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6053080801ad4f6e94ec12ed49da897a~tplv-k3u1fbpfcp-watermark.image"></p>
<p>授权 APP ID 可以通过 “设置 - 基本设置” 的账号信息进行查看</p>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f98f90c1f6f448d9ad987662625f38fc~tplv-k3u1fbpfcp-watermark.image"></p>
<p>b、勾选 “WebService API”</p>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3b3794fad39946b1a6b8067aaa4cce97~tplv-k3u1fbpfcp-watermark.image"></p>
<p>小程序插件需要使用WebService API的部分服务，所以需要给使用该功能的KEY配置相应权限。</p>
<p>如果填写了域名白名单，需要把<code>servicewechat.com</code>域名添加进域名白名单中，否则小程序下将无法正常使用WebServiceAPI服务。</p>
<h2 id="插件的使用">插件的使用</h2>
<p>1、引入插件</p>
<p>地图选点appId： wx76a9a06e5b4e693e</p>
<pre><code>// app.json
{
    "plugins": {
      "chooseLocation": {
      "version": "1.0.5",
      "provider": "wx76a9a06e5b4e693e"
      }
    }
}
</code></pre>
<p>2、设置定位授权</p>
<p>地图选点插件需要小程序提供定位授权才能够正常使用定位功能</p>
<pre><code>// app.json
{
    "permission": {
      "scope.userLocation": {
      "desc": "你的位置信息将用于小程序定位"
      }
    }
}
</code></pre>
<p>3、代码实现</p>
<p>a、js代码</p>
<pre><code>"use strict";
const chooseLocation = requirePlugin('chooseLocation');
Page({
    data: {
      address: "",
      locationName: ""
    },
    onShow: function () {
      // 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
      // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
      const location = chooseLocation.getLocation();
      if(location){
            this.setData({
                address: location.address?location.address : "",
                locationName: location.name?location.name : ""
            });
      }
    },
    //显示地图
    showMap() {
      //使用在腾讯位置服务申请的key（必填）
      const key = "";
      //调用插件的app的名称（必填）
      const referer = "";
      wx.navigateTo({
            url: 'plugin://chooseLocation/index?key=' + key + '&amp;referer=' + referer
      });
    }
});
</code></pre>
<p><code>plugin://chooseLocation/index</code> 接口参数说明：</p>
<p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/84750d6471b34f9cb042b162ee10fae3~tplv-k3u1fbpfcp-watermark.image"></p>
<p>b、wxml代码</p>
<pre><code>&lt;!--index.wxml--&gt;
&lt;view class="container"&gt;
&lt;button bindtap="showMap"&gt;选择位置&lt;/button&gt;
&lt;view style="margin-top:10px"&gt;地址：{{address?address:"暂无"}}&lt;/view&gt;
&lt;view style="margin-top:10px"&gt;名称：{{locationName?locationName:"暂无"}}&lt;/view&gt;
&lt;/view&gt;
</code></pre>
<p>4、效果实现</p>
<p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e94261474e04b8787bd89fb306393f3~tplv-k3u1fbpfcp-watermark.image"></p>
<blockquote>
<p>作者：盛夏温暖流年</p>
<p>链接：https://blog.csdn.net/j1231230/article/details/112352787</p>
<p>来源：CSDN</p>
<p>著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/TencentLBS/p/14721599.html
頁: [1]
查看完整版本: 小白入门必看 ‘’微信小程序地图定位开发教程‘’