微信小程序之实现地图定位（使用腾讯位置服务插件）- 前端开发

请添加图片描述

文章目录

一. 腾讯位置服务插件简介

1. 完整的地图能力

腾讯位置服务基于微信提供的小程序插件能力，专注于（围绕）地图功能，打造一系列小程序插件，可以帮助开发者简单、快速的构建小程序，是实现地图功能的最佳伙伴。

目前腾讯位置服务提供路线规划、地图选点、地铁图三款插件产品，本篇博客主要针对地图选点功能进行实现。

路线规划：提供地图路线规划功能。根据起终点，智能规划驾车、公交、步行出行路线及详情。开发者可以将路线规划插件嵌入到自建小程序的页面里，实现路线规划功能。

地铁图：支持全国重点城市地铁线路静态展示、信息查询、线路检索及规划功能。

地图选点：快速、准确地选择并确认自己的当前位置，并将相关位置信息回传给开发者。同时还提供位置检索、关键词分类等辅助功能。

2. 地图插件的优势

丰富的插件市场：丰富的地图插件产品，为开发者提供更多的选择，满足不同的应用场景。

节约开发成本：插件本身具有强大的灵活性，无需开发者投入专业的人力研发，就可以拥有地图能力，缩减企业研发成本。

专业的行业方案：腾讯位置服务专注于地图能力，多年服务政企、美团、京东、滴滴等大客户的经验，锻造了更加专业的产品并提供更优秀的行业解决方案。

二. 开通腾讯位置服务

1.进入微信公众平台
https://mp.weixin.qq.com/

2.登录进入小程序后台，选择 “开发 - 开发工具 - 腾讯位置服务”
在这里插入图片描述
3.点击 “开通”，进入授权扫码界面

4.使用微信扫码进行授权

5.绑定开发者账号

三、接入插件

1.在小程序后台，选择 “设置 - 第三方设置 - 插件管理”，点击 “添加插件” 在这里插入图片描述
2.搜索 “腾讯位置服务地图选点” 进行添加

四、开发者密钥配置

申请开发者密钥

进入腾讯位置服务平台：

https://lbs.qq.com?lbs_invite=Y9PRFLY

注册或登录后，申请开发者密钥：
在这里插入图片描述
PS: 成功申请密钥后才可以调用腾讯位置服务官网提供的相关服务；

设置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": "你的位置信息将用于小程序定位"
        }
    }
}

1
2
3
4
5
6
7
8
9

代码实现

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
        });
    }
});

1112
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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>

1
2
3
4
5
6
7