编写一个微信小程序帮助显示当前实时地理位置。

开发平台：微信开发者工具

获取经纬度的代码字段:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p9xKm2ko-1611989214467)(https://cdn.acwing.com/media/article/image/2021/01/30/39383_5e5ce80962-getl.png)]

在app.json页面添加permission字段
创建location页面

真机调试效果（scale为20）：

可见此时精度已经到了可以显示街边店铺。

可以通过修改scale的大小来改变显示的精度

####完整代码：

app.json

{"pages": ["pages/location/location"   //根据自己的需求添加其他页面],"window": {"backgroundColor": "#F6F6F6","backgroundTextStyle": "light","navigationBarBackgroundColor": "#F6F6F6","navigationBarTitleText": "实时地图显示","navigationBarTextStyle": "black"},"tabBar": {               //根据个人需求添加其他的tabBar"selectedColor": "#d81e06","backgroungColor": "#ffffff","borderStyle": "white","list": [{"pagePath": "pages/location/location","iconPath": "images/tab/locate.png","selectedIconPath": "images/tab/locateHL.png","text": "定位"}]},"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}},"sitemapLocation": "sitemap33.json"
}

location.js

var app = getApp()
Page({onLoad: function () {console.log('地图定位！')var that = thiswx.getLocation({type: 'gcj02', //返回可以用于wx.openLocation的经纬度success: function (res) {var latitude = res.latitude; var longitude = res.longitude; wx.openLocation({latitude:latitude,longitude:longitude,scale:20})}});}
})

location.json

{"navigationBarTitleText": "当前地图位置"
}

location.wxml

#map {padding: 40rpx;
}

微信小程序云开发实时地图显示相关推荐

没学后端也能开发小程序——微信小程序云开发的介绍知识
微信小程序云开发的介绍知识云开发模式产品经理-->前端开发-->上线云开发传统开发效率只关心业务逻辑,效率高需要关注非业务逻辑,效率低成本按需付费,有免费额度前期需要预 ...
微信小程序云开发 · 从0搭建商业级校园跑腿平台（已开源）
微信小程序云开发 · 从零搭建商业级校园跑腿平台小秃僧新生代农民工,一枚准毕业的大四学生,热爱前端开发,做个有态度.有思想.有价值的公众号. 好久不更新了,再更新已是打工人! 我将分享用云开发 ...
微信小程序云开发项目——多肉植物销售小程序
前言此项目为本人在大学的毕业设计作品,基于微信小程序云开发技术进行开发,暂未商用和托管.编写文章意在为求职做准备,亦乐于与大家进行经验交流分享,欢迎进行评论咨询哦. 简介用户角色分为:一般顾客.商 ...
微信小程序云开发及背后的云服务支持。
文章目录导语什么是微信小程序云开发? 云开发的优势云开发的技术生态支持微信云开发主要能力特性云数据库: 云函数: 云存储: 身份认证: 云调用: 云开发与传统开发的模式区别小程序云开发带来 ...
微信小程序云开发项目实战之商城开发日记 04
今天是愉快开发商城项目的第四天了,相信如果大家跟着我能把前两天的前端内容敲完,相信你是有比较大的收货的. 今天的内容是完成购物车的前端代码. 购物车的设计还是比较常规的UI,展示商品的信息,提供选中按 ...
关于微信小程序云开发以及云开发实例展示
本文分享给使用微信云开发的同学序言首先,云开发是一种趋势,因为跨平台解决方案可以提高开发效率,减少开发成本.使用云开发,开发者无需关注服务器.网络和数据库等底层技术,可以专注于业务逻辑的开发,从而 ...
微信小程序云开发实战：网上商城（一）
微信小程序云开发实战:网上商城(一) 关于本系列工具与平台微信开发者工具小程序账号云开发辅助开发工具开发平台创建项目云函数接下来关于本系列偶然的机会需要给人做一个团购类的微信小程 ...
微信小程序云开发之用户输入数据后excel表格导出升级版
大家好,我是csdn的小博主lqj_本人,最近在哔哩哔哩开始上传我的制作微信小程序的详细流程,大家可以关注一下哔哩哔哩:小淼前端本次程序的详细视频教程已上传至哔哩哔哩: 腾讯云开发小程序之用户输入数 ...
python操作微信小程序云端数据库_微信小程序云开发之数据库操作
本文实例为大家分享了微信小程序云开发之数据库操作的具体代码,供大家参考,具体内容如下新建集合 1.打开云开发控制台,数据库 2.添加集合users 添加代码 onAdd: function () { ...
微信小程序云开发不完全指北
微信小程序云开发不完全指北首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...

微信小程序云开发实时地图显示

编写一个微信小程序帮助显示当前实时地理位置。

真机调试效果（scale为20）：

可以通过修改scale的大小来改变显示的精度

app.json

location.js

location.json

location.wxml

微信小程序云开发实时地图显示相关推荐

最新文章

热门文章

微信小程序云开发 实时地图显示

编写一个微信小程序帮助显示当前实时地理位置。

真机调试效果（scale为20）：

可以通过修改scale的大小来改变显示的精度

app.json

location.js

location.json

location.wxml

微信小程序云开发 实时地图显示相关推荐

最新文章

热门文章

微信小程序云开发实时地图显示

微信小程序云开发实时地图显示相关推荐