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

前言

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

开通腾讯位置服务

1、进入微信公众平台

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

image.png

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

image.png

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

image.png

5、绑定开发者账号

image.png

接入插件

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

image.png

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

image.png

开发者密钥配置

1、申请开发者密钥

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

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

image.png

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

image.png

b、勾选 “WebService API”

image.png

小程序插件需要使用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 接口参数说明:

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>

4、效果实现

20210115205321358.gif

作者:盛夏温暖流年

链接:https://blog.csdn.net/j123123...

来源:CSDN

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


腾讯位置服务
腾讯位置服务产品、技术交流。

立足生态,连接未来

1.6k 声望
110 粉丝
0 条评论
推荐阅读
轨迹云全新发布 :外业车辆、人员、设备轨迹高效管理
前言:当今很多业务的开展,如公共交通、物流运输、配送、打车、共享单车、智能硬件、车载设备的管理追踪等,都需要对位置及轨迹的有效管理才能得以实现,并高效运行。而要实现轨迹的管理应用,需要具备定位、大...

腾讯位置服务阅读 205

封面图
简单实现微信小程序支付+php后端(回调、查询订单、订单信息入库)
微信小程序获取订单参数-&gt;向后端发起同意下单请求-&gt;获取订单参数-&gt;小程序调用Api进行发起支付-&gt;支付完成-&gt;发送回调-&gt;支付结果入库-&gt;查询订单支付状态。

TANKING1阅读 1.2k

微信小程序开发--个性化头像生成(国庆渐变头像、圣诞帽头像)
今年国庆 渐变头像着实火了一把,看到微信里面的好友,很多都换上了新颜。 如上图所示,一个渐变的头像。作为码农,看到上面的效果,首先会想到这个是怎么实现的?我可不可以?于是就有了今天这篇文章,记录一下...

caiandroidDev阅读 1.9k

使用腾讯位置服务API如何实现打卡功能?
腾讯位置服务提供了定位,地图,地点抖索,导航等各种各样的服务。并且提供了各行各业相关行业解决方案,腾讯位置服务在多平台为开发者提供了丰富的地图展现形式,帮助从属于不同领域的开发人员轻松完成构建地图...

腾讯位置服务阅读 1.4k

封面图
微信小程序开发初体验全纪录
月初公司安排了一个小程序开发程序之前盲人摸象般的了解过一些小程序开发本次开发对小程序有一些更立体的认识页面说明(请原谅截图中因保护隐私被隐藏和修改后的不合理样式):0:小程序新页面添加及目录结构说明...

charlotteeeeeee阅读 553

不会写代码?也不懂技术?3分钟搭建电商cps系统搞副业
以前见面聊天,大家都习惯性会问“你吃饭了吗”,现在大家一出口就是“你阳了吗”。2023年元旦过去了,你还阳着么?不出意外的话就会出意外,小悟也已经中招过了,在家躺了六天,元旦前三天外加元旦三天假期,阳一次...

悟空码字阅读 502

封面图
创建好的小程序如何正式发布?
前置准备:一个待发布的小程序。具体步骤:Editor 中点击 Publish创建新的试用小程序已有试用小程序轮转绑定进入 User CMS 完成认证个人认证企业认证完善小程序信息提交审核发布上线Editor 中点击 Publish创建新的...

Towify阅读 432

封面图

立足生态,连接未来

1.6k 声望
110 粉丝
宣传栏