手机在线网站,快递网站建站需要什么,vs2015可以做网站么,wordpress双域名【相关文章】
【腾讯地图】【微信小程序】地图选点 【腾讯地图】【微信小程序】路线规划 【腾讯地图】【微信小程序】城市记录#xff08;基于地图选点入门版#xff09;
【效果展示】 【官方文档】
微信小程序插件-地图选点插件
【完善流程】 当前操作和官方文档操作有部…【相关文章】
【腾讯地图】【微信小程序】地图选点 【腾讯地图】【微信小程序】路线规划 【腾讯地图】【微信小程序】城市记录基于地图选点入门版
【效果展示】 【官方文档】
微信小程序插件-地图选点插件
【完善流程】 当前操作和官方文档操作有部分出入多加了 demo 和获取本地位置。 1. 插件申请微信公众号申请插件使用
两个申请路径 ① 直接传送门《腾讯位置服务地图选点》 ② 直接登录微信公众号 -设置——》第三方设置——》插件管理——》添加插件——》搜索地图选点——》进行添加 图片流程点击展开 插件管理出现腾讯位置服务地图选点后,就是申请完成了。 2. 腾讯地图-申请应用 登录腾讯地图位置服务进入后台后点击应用管理左上角——》我的应用——》创建应用右上角 -------
3. 申请 key 到应用中 完成 步骤2 申请应用后需要新增 key 进行绑定微信小程序 添加 Key ——》 填写 Key 名称 ——》 勾选WebServiceAPI ——》输入微信小程序授权APP ID——》 添加 查看获取微信小程序 AppID 流程点击展开 前提已有微信小程序也就是申请微信公众号中的小程序。
登录微信小程序微信公众号后左边菜单找到 “设置”——》往下拉找到“帐号信息”。
第一个显示的就是 AppID(小程序ID) wx58a64e5f22b13552 。 4. 引入插件 - 地图选点和设置定位授权app.json文件 往 app.json 文件中添加对应授权。 getLocation 是请求当前地理位置注意chooseLocation插件如果有更新有可能是需要更新到最新的才能使用。 plugins: {chooseLocation: {version: 1.0.10,provider: wx76a9a06e5b4e693e}},permission: {scope.userLocation: {desc: 你的位置信息将用于小程序位置接口的效果展示}},requiredPrivateInfos: [getLocation],5. 编写页面代码进行调试并启动使用 官方文档https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker 官方的太不详细使用了这里进行简单使用一下。 map.wxml 文件
view stylefont-size: larger;font-weight: bold;历史记录/view
view wx:if{{historyList.length0}}
暂无记录请进行添加地图选点
/view
view wx:for{{historyList}} wx:keyitem wx:indexindexview stylecolor:rgb(13, 155, 20){{index 1}}./viewview经度text stylecolor:red{{item.longitude}}/text/viewview纬度text stylecolor:rgb(177, 38, 170){{item.latitude}}/text/viewview具体位置text stylecolor:rgb(0, 2, 128){{item.address}}{{item.name}}/text/view
/viewview styleposition: absolute;bottom: 40rpx; left: 0;right: 0;margin: auto;button bindtapgetLocal地图选点/button
/viewmap.js 文件
// pages/map/map.js
// 参考地址https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker
const chooseLocation requirePlugin(chooseLocation);
Page({/*** 页面的初始数据*/data: {historyList: [], // 地图选点历史记录},/*** 生命周期函数--监听页面加载*/onLoad(options) {},getLocal(e) {// console.log(e)wx.getLocation({ // 返回当前的经度、纬度type: gcj02,success: function (res) {// console.log(res)var latitude res.latitudevar longitude res.longitudeconst key NE6BZ-ECCKA-FBFKU-CHTRS-OVSAJ-WNBVF; //使用在腾讯位置服务申请的keyconst referer 地图选点; //调用插件的app的名称const location JSON.stringify({ // 初始地址latitude,longitude});const category 生活服务,娱乐休闲;wx.navigateTo({url: plugin://chooseLocation/index?key key referer referer location location category category});},fail: function (err) {console.log(err, err)}})},// 从地图选点插件返回后在页面的onShow生命周期函数中能够调用插件接口取得选点结果对象onShow() {const location chooseLocation.getLocation(); // 如果点击确认选点按钮则返回选点结果对象否则返回nullif (!location) {// 为空则直接返回即可return;}let that this;var {historyList} that.data;historyList.push(location);that.setData({historyList})},onUnload() {// 页面卸载时设置插件选点数据为null防止再次进入页面geLocation返回的是上次选点结果chooseLocation.setLocation(null);},
})【源码地址】
https://github.com/TeaTools/wx-anpai
【文章小尾巴】 文章小尾巴点击展开
文章写作、模板、文章小尾巴可参考《写作“小心思”》 感谢你看到最后最后再说两点~ ①如果你持有不同的看法欢迎你在文章下方进行留言、评论。 ②如果对你有帮助或者你认可的话欢迎给个小点赞支持一下~ 我是南方者一个热爱计算机更热爱祖国的南方人。 文章内容仅供学习参考如有侵权非常抱歉请立即联系作者删除。
