关于腾讯地图:小白入门必看-‘微信小程序地图定位开发教程‘

5次阅读

共计 1562 个字符，预计需要花费 4 分钟才能阅读完成。

目前腾讯位置服务提供路线布局、地图选点、地铁图、城市选择器插件四款插件产品，本篇博客次要针对地图选点性能进行实现。

1、进入微信公众平台

2、登录进入小程序后盾，抉择“开发 – 开发工具 – 腾讯位置服务”

3、点击“开明”，进入受权扫码界面

4、应用微信扫码进行受权

5、绑定开发者账号

1、在小程序后盾，抉择“设置 – 第三方设置 – 插件治理”，点击“增加插件”

2、搜寻“腾讯位置服务地图选点”进行增加

1、申请开发者密钥

2、设置 KEY 的“启用产品”

a、勾选微信小程序，设置受权 APP ID

受权 APP ID 能够通过“设置 – 根本设置”的账号信息进行查看

b、勾选“WebService API”

小程序插件须要应用 WebService API 的局部服务，所以须要给应用该性能的 KEY 配置相应权限。

如果填写了域名白名单，须要把 servicewechat.com 域名增加进域名白名单中，否则小程序下将无奈失常应用 WebServiceAPI 服务。

1、引入插件

地图选点 appId：wx76a9a06e5b4e693e

// app.json
{
    "plugins": {
        "chooseLocation": {
        "version": "1.0.5",
        "provider": "wx76a9a06e5b4e693e"
        }
    }
}

2、设置定位受权

地图选点插件须要小程序提供定位受权才可能失常应用定位性能

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

3、代码实现

a、js 代码

"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 + '&referer=' + referer});
    }
});

plugin://chooseLocation/index 接口参数阐明：

b、wxml 代码

<!--index.wxml-->
<view class="container">
  <button bindtap="showMap"> 抉择地位 </button>
  <view style="margin-top:10px"> 地址：{{address?address:"暂无"}}</view>
  <view style="margin-top:10px"> 名称：{{locationName?locationName:"暂无"}}</view>
</view>

4、成果实现