小程序插件引入(地铁图/路线规划/地图选点/城市选择器)

最新推荐文章于 2024-06-13 00:17:07 发布
最新推荐文章于 2024-06-13 00:17:07 发布
阅读量872 收藏 6
点赞数
分类专栏： # 原生
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53912016/article/details/117128715
版权

小程序插件官方地址–腾讯

初始化

这边使用的是腾讯家的插件,所以我们要按照他家的要求一步一步来。

  1. 首先我们要申请一个key值(申请key值是去腾讯地图开发平台去找)

  2. 然后在小程序里面添加插件 (这2步是上方官方地址的入门有介绍)

  3. 然后我们就开始引入
    在这里插入图片描述

引入

然后根据官方的介绍引入https://lbs.qq.com/miniProgram/plugin/pluginGuide/subway

app.json

引入插件包

   // 地铁图插件
 "plugins": {
        "subway": {
        "version": "1.0.10",
        "provider": "wx6aaf93c4435fa1c1"
        }
    }
    // 路线规划插件
      "plugins": {
        "routePlan": {
        "version": "1.0.12",
        "provider": "wx50b5593e81dd937a"
        }
    }
    // 地图选点插件
     "plugins": {
        "chooseLocation": {
        "version": "1.0.6",
        "provider": "wx76a9a06e5b4e693e"
        }
    }
    // 城市选择器插件
     "plugins": {
        "citySelector": {
             "version": "1.0.0",
             "provider": "wx63ffb7b7894e99ae"
         }
    }

设置定位授权

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

在这里插入图片描述

参考页面1

这个页面包括传输携带经纬度与名称，然后这边你可以来接收
在这里插入图片描述
参考页面2

效果图

这边选择时会显示对应的经纬度与位置的变化
在这里插入图片描述

地图选点案例

wxml

<view class="main">
    <view class="row" bindtap = "clickMap">
        <view class="hintText">地图选点</view>
        <image class="rightArrow" src="{{rightArrow}}" ></image>
    </view>
    <view class="line"></view>
</view>
<view class="main" wx:if="{{address}}" >
    <view class="addressRow" bindtap = "clickMap">
        <view class="addressHint">地图选点位置：</view>
        <view class="hintText">{{address}}</view>
    </view>
</view>

wxss

/* pages/city/city.wxss */
page{
        width: 100%;
        background: #f7f7f7;
    }
    .main{
        width:100%;
        margin-top: 60rpx;
    }
    .row{
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 100rpx;
        background: #ffffff;
    }
    .hintText{
        width:90%;
        font-size: 28rpx;
        color:#000000;
        font-family: PingFang SC;
        font-weight: 400;
        padding-left: 30rpx;
    }
    .rightArrow{
        width:36rpx;
        height: 36rpx;
    }
    .line{
        margin-left: 30rpx;
        height: 1rpx;
        background: #eeeeee;
    }
    /*选点具体结果*/
    .addressRow{
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 200rpx;
        background: #ffffff;
    }
    .addressHint{
        width:90%;
        font-size: 32rpx;
        color:green;
        font-family: PingFang SC;
        font-weight: bold;
        padding-left: 30rpx;
    }

js

// pages/city/city.js
const chooseLocation = requirePlugin('chooseLocation') //地图选点结果插件实例
Page({

        /**
         * 页面的初始数据
         */
        data: {
                latitude: "",
                longitude: "",
                address: "",
                key: '64ABZ-PMWCQ-EYH5D-G4H4G-3R3LH-F2BGN', //在腾讯位置服务申请的key
                referer: '微信小程序定位', //调用腾讯位置服务相关插件的app的名称
                rightArrow: "../../images/rightArrow.png"
        },

        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {

        },
        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function () {
                // 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
                const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
                if (location != null) {
                        console.log(location)
                        this.setData({
                                latitude: location.latitude,
                                longitude: location.longitude,
                                address: location.name
                        })
                }
        },
        //腾讯位置服务地图选点
        clickMap() {
                let that = this
                //获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限
                wx.getSetting({
                        success(res) {
                                //console.log(res)
                                //scope.userLocation 就是地理授权的标志：
                                //res.authSetting['scope.userLocation'] == undefined 表示初始进入该页面
                                //res.authSetting['scope.userLocation'] == false 表示非初始化进入该页面 且未授权
                                //res.authSetting['scope.userLocation'] == true 表示地理位置授权
                                if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
                                        //表示非初始化进入该页面 且未授权：
                                        wx.showModal({
                                                title: '请求授权当前位置',
                                                content: '需要获取您的地理位置，请确认授权',
                                                showCancel: true,
                                                cancelText: '取消',
                                                cancelColor: '#000000',
                                                confirmText: '确定',
                                                confirmColor: '#3CC51F',
                                                success: (result) => {
                                                        if (res.cancel) {
                                                                wx.showToast({
                                                                        title: '拒绝授权',
                                                                        icon: 'none',
                                                                        duration: 1000
                                                                });
                                                        } else if (result.confirm) {
                                                                //调起客户端小程序设置界面，返回用户设置的操作结果。 
                                                                //设置界面只会出现小程序已经向用户请求过的权限
                                                                wx.openSetting({
                                                                        success: (dataAu) => {
                                                                                if (dataAu.authSetting["scope.userLocation"] == true) {
                                                                                        wx.showToast({
                                                                                                title: '授权成功',
                                                                                                icon: 'success',
                                                                                                duration: 1000
                                                                                        });
                                                                                        //再次授权之后，调用腾讯位置服务的地图选点插件API
                                                                                        that.callQQPlugin()
                                                                                } else {
                                                                                        wx.showToast({
                                                                                                title: '授权失败',
                                                                                                icon: 'none',
                                                                                                duration: 1000
                                                                                        });
                                                                                }
                                                                        }
                                                                });

                                                        }
                                                }
                                        });

                                } else if (res.authSetting['scope.userLocation'] == undefined) {
                                        //调用腾讯位置服务的地图选点插件API
                                        that.callQQPlugin()
                                } else {
                                        //调用腾讯位置服务的地图选点插件API
                                        that.callQQPlugin()
                                }
                        }

                })
        },
        //调用腾讯位置服务的地图选点插件API
        callQQPlugin() {
                const key = this.data.key; //使用在腾讯位置服务申请的key
                const referer = this.data.referer; //调用插件的app的名称
                const latitude = this.data.latitude
                const longitude = this.data.longitude
                if (latitude != "" && longitude != "") {
                        const location = JSON.stringify({
                                latitude: latitude,
                                longitude: longitude
                        });
                        wx.navigateTo({
                                url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location
                        });
                } else {
                        wx.navigateTo({
                                url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer
                        });
                }
        },
        //腾讯位置服务路线规划
        routePlan() {
                let that = this
                //获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限
                wx.getSetting({
                        success(res) {
                                //console.log(res)
                                //scope.userLocation 就是地理授权的标志：
                                //res.authSetting['scope.userLocation'] == undefined 表示初始进入该页面
                                //res.authSetting['scope.userLocation'] == false 表示非初始化进入该页面 且未授权
                                //res.authSetting['scope.userLocation'] == true 表示地理位置授权
                                if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
                                        //表示非初始化进入该页面 且未授权：
                                        wx.showModal({
                                                title: '请求授权当前位置',
                                                content: '需要获取您的地理位置，请确认授权',
                                                showCancel: true,
                                                cancelText: '取消',
                                                cancelColor: '#000000',
                                                confirmText: '确定',
                                                confirmColor: '#3CC51F',
                                                success: (result) => {
                                                        if (res.cancel) {
                                                                wx.showToast({
                                                                        title: '拒绝授权',
                                                                        icon: 'none',
                                                                        duration: 1000
                                                                });
                                                        } else if (result.confirm) {
                                                                //调起客户端小程序设置界面，返回用户设置的操作结果。 
                                                                //设置界面只会出现小程序已经向用户请求过的权限
                                                                wx.openSetting({
                                                                        success: (dataAu) => {
                                                                                if (dataAu.authSetting["scope.userLocation"] == true) {
                                                                                        wx.showToast({
                                                                                                title: '授权成功',
                                                                                                icon: 'success',
                                                                                                duration: 1000
                                                                                        });
                                                                                        //再次授权之后，调用腾讯位置服务的路线规划插件API
                                                                                        that.callRoutePlanPlugin()
                                                                                } else {
                                                                                        wx.showToast({
                                                                                                title: '授权失败',
                                                                                                icon: 'none',
                                                                                                duration: 1000
                                                                                        });
                                                                                }
                                                                        }
                                                                });

                                                        }
                                                }
                                        });

                                } else if (res.authSetting['scope.userLocation'] == undefined) {
                                        //调用腾讯位置服务的路线规划插件API
                                        that.callRoutePlanPlugin()
                                } else {
                                        //调用腾讯位置服务的路线规划插件API
                                        that.callRoutePlanPlugin()
                                }
                        }

                })
        },
        //
        callRoutePlanPlugin() {
                let plugin = requirePlugin('routePlan') //路线规划插件
                let key = this.data.key; //使用在腾讯位置服务申请的key
                let referer = this.data.referer; //调用插件的app的名称
                let latitude = this.data.latitude
                let longitude = this.data.longitude
                if (latitude != "" && longitude != "") {
                        let endPoint = JSON.stringify({ //终点
                                name: this.data.address,
                                latitude: latitude,
                                longitude: longitude
                        })
                        wx.navigateTo({
                                url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint= ' + endPoint
                        });
                } else {
                        console.log('请先选择地点')
                }
        }
})

在这里插入图片描述

小阳生煎
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序-调用腾讯地图插件实现定点，路线规划，地铁图，服务拓展（逆地址解析，地点搜索）
xq_falling的博客
11-26 1740
实现流程实现思路使用工具基础介绍小程序结构介绍整体代码结构调用插件主页分析定点出行规划服务地铁图服务接口能力逆地址解析地点搜索注意问题问题仓库地址 实现思路 选择小程序作为实现主题 通过调用api与接口服务实现功能 使用工具 微信开放者平台 关于如何申请key 申请sdk此处不做赘述网上资料很多。 基础介绍 主要由以下四种文件组成，更多信息查阅微信小程序的开发文档。网址如下： https://developers.weixin.qq.com/miniprogram/dev/framework/
微信小程序 城市选择组件 城市选择器
10-13
微信小程序里面，需要用到城市选择地地方，通过调用城市选择器的组件，供页面选择城市
微信小程序对接使用腾讯地图-位置选点和路线规划接口
weixin_44779466的博客
03-02 1615
微信小程序使用 腾讯位置服务插件 实现 地图选点和路线规划 效果图 实现代码 1. app.json中添加代码 "plugins":{ "chooseLocation":{ "version":"1.0.2", "provider":"wx76a9a06e5b4e693e" }, "routePlan":{ "version":"1.0.5", "provider":"wx50b5593e81dd937a" } }
status: 121, message: “此key每日调用量已达到上限“, request_id: “e7c233e1ba3c
最新发布
m0_73061132的博客
06-13 515
status: 121, message: "此key每日调用量已达到上限", request_id: "e7c233e1ba3c。去腾讯位置服务官网进行配额。
微信小程序插件引入，地铁图插件、地图选点插件、地图选点插件
weixin_40030173的博客
08-03 1936
第一步：记住下面内容一定要写在app.json这个文件里 "plugins": { "subway": { "version": "1.0.9", "provider": "wx6aaf93c4435fa1c1" } }, "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" } } 第二步：(pages/index/index.wxml) <view class="containe
基于php的地铁查询系统,省时方便的小程序：查地铁
weixin_42104947的博客
03-10 306
现在在国内的很多城市都有地铁，BAT或者有轨电车，甚至是公交车。当我们需要查询出行的线路公交，地铁时我们就需要有一款工具帮助大家。为了查地铁就下载一个app也挺费内存和容量的，尤其对于一个iphone只有16G的用户来说。所以今天我们就给大家介绍一款新的地铁出行指南小程序，「查地铁」小程序免流量查询各大城市地铁线路、出入口、运营时间及周边吃喝玩乐信息。小程序最大亮点是消耗极少流量为你查询周边地铁站...
APP，微信小程序富文本编辑器（包含图片视频上传，地图选点）
12-22
本文将深入探讨一个专为APP和微信小程序设计的富文本编辑器，该编辑器支持图片和视频上传以及地图选点功能。 富文本编辑器是网页或应用程序中的一个重要组成部分，它允许用户创建和编辑包含各种格式（如字体、颜色...
微信小程序 地图选点 获取用户选择的定位信息 wx.chooseLocation
01-08
总之，一句话： 获取用户在微信小程序中，提交的地图选点的相关信息。 就比如下面的例子：在某个提交房屋登记的表单中，需要提交房屋的定位信息。我们不能通过获取用户的定位来实现，因为用户不一定在自己的房屋内...
微信小程序-微信小程序地图定位选点存储
08-06
微信小程序地图选点收藏Demo 本程序是用于测试微信小程序地图功能及与LeanCloud数据存储管理功能的Demo。 本程序目前未添加AppID无法进行真机调试，欢迎已经申请到资格的朋友测试反馈。 本程序数据管理功能基于...
微信小程序——打开地图选择位置信息完整功能实现代码(定位，可移动选点，可搜索，腾讯地图API)
04-03
小程序中打开地图选择店铺位置，地图定位选择地点实现方法如下，（仿美团外卖商家入驻店铺地址选择页面制作） 功能如下： 1. 默认地位显示地图，下面显示附近场所 2. 可输入搜索关键词，匹配地点 3. 点击地区，...
小程序腾讯地图选点很不错
12-05
首先，我们要明白“小程序腾讯地图选点”是指用户可以在小程序内通过腾讯地图服务选择特定的位置点。这一功能通常是通过腾讯地图SDK（Software Development Kit）提供的，它包含了各种地图相关的接口和方法。用户...
微信小程序城市选择器.zip
05-10
微信小程序城市选择器 没有加搜索，请自行添加搜索 1、安装 git clone git@github.com:chenjinxinlove/citySelect.git cd citySelect/ npm install 是基于gulp，需要安装依赖，支持es6语法 dist设置为微信小程序目录，src开发目录，添加IDE认识微信的文件，css基于sass image 2、npm run dev 启动 3、处理城市列表的js脚本在/node/process.js node process 执行
微信小程序腾讯地图导航
qq_41431262的博客
04-14 1992
微信小程序腾讯地图导航 想实现一种类似于腾讯地图小程序实时语音导航的小程序，腾讯地图小程序提供的插件API没有实时语音导航的功能。 下图是腾讯地图小程序路线规划插件。点击开始导航时直接跳转了，并没有实时语音播放功能。 下图是腾讯地图官方小程序，该小程序中可以实时语音播放要走的位置。 最终想实现的功能是：用户在微信小程序中（地图），点击地图中设置的地图标记点，进行导航功能，在导航过程中，经过多个...
微信小程序百度地图API移动选点
yanmymickey的博客
07-26 2558
微信小程序百度地图API移动选点 因为业务需要使用百度地图API，参考一位大佬编写腾讯API的思路和方法，改造成百度地图API移动选点。 思路： wxml前端部分就不改了，用用大佬的。 微信地图API获取当前位置经纬度信息->百度地图API逆地址解析方法,获取当前位置名称,省市区等信息->setData mapChange函数监听地图移动->设置一个定时器达到轮询的目的，设置isGet参数判断onLoad中的wx.getlocation是否执行完。->nearby_search以当前
【uniapp】 微信小程序使用腾讯API地图、路线轨迹、marker标记点
weixin_42216995的博客
05-27 2463
腾讯地图、地图选点、marker、轨迹、路线
微信小程序 腾讯地图根据起点终点绘制线路
weixin_44676551的博客
11-01 4456
微信小程序 腾讯地图根据起点终点绘制线路 图片 链接: link. 图片:腾讯地图绘制线路图 代码片 去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片. // An highlighted block goto() { var that = this; var start = that.startlat + "," + that.startlng; ...
微信小程序调用腾讯地图API进行驾车路线规划
qq_36470898的博客
07-15 6745
微信小程序调用腾讯地图API进行驾车路线规划申请key下载sdk实现代码遇到的问题 申请key 微信小程序的地图api是非常有限的，所以部分功能实现需要调用地图api.使用腾讯地图api过程如下： 首先要在腾讯地图开发平台先注册账号，申请key腾讯地图开发平台 申请完key对其进行设置 下载sdk 下载sdk并解压将其放入到你的微信小程序的目录中。jssdk v1.2 实现代码 .js文件 /...
微信小程序接入腾讯地图sdk地图 用户自选位置。踩坑+代码实现
飞奔的屎壳郎
10-23 1546
采坑记录: 1.微信小程序对腾讯地图的支持好。拓展强，不建议使用其他地图 2.坐标问题** 高德地图与腾讯地图使用的是 GCJ02坐标系 3.使用微信小程序的内置方法的经纬度存在偏差。解决方案看下文 4.图下的地图选点插件页面没有办法改变页面内容，官方的 5.引入的官方的js，所以说还有一些功能也是可以用的。感觉官网没说太仔细（先把地图做出来，再看这个网址的文档，不然容易乱） https://l...
微信小程序调用腾讯地图，点击选择并返回选择位置数据！
海贼王某人的博客
04-16 1256
选择前 选择位置 选择后 上代码:WXML <view class="cu-form-group border-bottom"> <view class="title">详细地址</view> <input class="address-right" disabled='{{true}}' required="{{true}}" name="address" value="{{address}}" bindtap="Ad
小程序内嵌h5怎么使用地图选点
07-11
4. 在小程序中，通过WebView组件加载H5页面，并在小程序的JavaScript代码中监听H5页面通过postMessage方法传递的经纬度信息，即可完成小程序内嵌H5地图选点的实现。 上述是一种常见的实现方式，具体还需根据所使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值