专栏首页腾讯位置服务小白入门必看 ‘’微信小程序地图定位开发教程‘’

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

前言

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

开通腾讯位置服务

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/j1231230/article/details/112352787

来源:CSDN

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序开发入门系列教程

    从今天起,学院君将会花大概半个月左右的时间更新微信小程序项目开发入门系列教程,涵盖小程序申请到基础功能的使用,再到一个完整项目的开发上线,希望通过此教程的学习,...

    学院君
  • 微信小程序开发入门篇

    本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。 开发准备工作 获取微信小程序的 AppID 登录 https://mp.wei...

    xiangzhihong
  • 微信小程序-开发入门(一)

    微信小程序已经火了一段时间了,之前一直也在关注,就这半年的发展来看,相对原生APP大部分公司还是不愿意将主营业务放到微信平台上,以免受制于腾讯,不过就小程序的应...

    小古哥
  • 微信小程序入门开发指南

    此篇是微信小程序开发的一个简明介绍和关键说明,微信小程序的主要开发语言是 JavaScript,如果你使用过 Vue 或者 React,你将会对微信小程序的开发...

    迟恩
  • 微信小程序云开发 初学者入门教程一

    本教程适合刚刚入门的小白,云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代...

    王小婷
  • 微信小程序云开发 初学者入门教程二

    如何操作数据库,作为一名前端,如果对数据的知识不够熟悉也没关系,从现在开始好好学习就行,数据库的操作内容差不多涉及增删改查四大模块,花一些业余的时间在上面,也必...

    王小婷
  • 零基础入门微信小程序开发

    最近一个小游戏“跳一跳”火得不得了,相信即使您自己没有玩过,身边的亲戚朋友也一定玩过。画面大致如下:

    Java编程指南
  • 微信小程序在腾讯地图上选择定位

    微信小程序地图上选择位置 参考这位大神的,确实有效果。 做了一个考勤的小程序,当然,也是整体拿的https://github.com/tommenx/wxs...

    hotqin888
  • 后端程序员也能看懂的微信小程序开发入门

    小程序时至今日已经非常火爆了,作为软件体系中的一员,越来越多的公司与个人都在发展自己的小程序,而且小程序不再是单一的微信小程序了,还有百度小程序、支付宝小程序、...

    蒋老湿

扫码关注云+社区

领取腾讯云代金券