前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小白入门必看 ‘’微信小程序地图定位开发教程‘’

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

作者头像
腾讯位置服务
发布2021-04-30 12:26:11
3.2K0
发布2021-04-30 12:26:11
举报
文章被收录于专栏:腾讯位置服务腾讯位置服务

前言

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

开通腾讯位置服务

1、进入微信公众平台

2、登录进入小程序后台,选择 “开发 - 开发工具 - 腾讯位置服务”

image.png
image.png

3、点击 “开通”,进入授权扫码界面

image.png
image.png

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

image.png
image.png

5、绑定开发者账号

image.png
image.png

接入插件

1、在小程序后台,选择 “设置 - 第三方设置 - 插件管理”,点击 “添加插件”

image.png
image.png

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

image.png
image.png

开发者密钥配置

1、申请开发者密钥

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

a、勾选微信小程序,设置授权 APP ID

image.png
image.png

授权 APP ID 可以通过 “设置 - 基本设置” 的账号信息进行查看

image.png
image.png

b、勾选 “WebService API”

image.png
image.png

小程序插件需要使用WebService API的部分服务,所以需要给使用该功能的KEY配置相应权限。

如果填写了域名白名单,需要把servicewechat.com域名添加进域名白名单中,否则小程序下将无法正常使用WebServiceAPI服务。

插件的使用

1、引入插件

地图选点appId: wx76a9a06e5b4e693e

代码语言:txt
复制
// app.json
{
    "plugins": {
        "chooseLocation": {
        "version": "1.0.5",
        "provider": "wx76a9a06e5b4e693e"
        }
    }
} 

2、设置定位授权

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

代码语言:txt
复制
// app.json
{
    "permission": {
        "scope.userLocation": {
        "desc": "你的位置信息将用于小程序定位"
        }
    }
}

3、代码实现

a、js代码

代码语言:txt
复制
"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 接口参数说明:
image.png
image.png
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>

代码语言:txt
复制

4、效果实现

20210115205321358.gif
20210115205321358.gif

作者:盛夏温暖流年

链接:https://blog.csdn.net/j1231230/article/details/112352787

来源:CSDN

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 开通腾讯位置服务
  • 接入插件
  • 开发者密钥配置
  • 插件的使用
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档