百度小程序-map组件定位
给客户开发一个百度小程序,有个地图定位显示。百度小程序内置的api地图是不准的,通过百度一下,查询到坐标偏移算法公式,自己项目中使用,手机测试坐标已经正常显示!
经纬度,通过百度坐标拾取器拾取到!
.swan文件
<map id="myMap" style="width:100%;height:50vh;" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}"></map>
.js文件
Page({
data: {
longitude: '120.93032',
latitude: '30.804545',
markers: []
},
onLoad: function () {
// 监听页面加载的生命周期函数
this.Map_Fn();
},
onReady: function () {
// 监听页面初次渲染完成的生命周期函数
this.mapContext = swan.createMapContext('myMap');
},
onShow: function () {
// 监听页面显示的生命周期函数
},
onHide: function () {
// 监听页面隐藏的生命周期函数
},
onUnload: function () {
// 监听页面卸载的生命周期函数
},
onPullDownRefresh: function () {
// 监听用户下拉动作
},
onReachBottom: function () {
// 页面上拉触底事件的处理函数
},
onShareAppMessage: function () {
// 用户点击右上角转发
},
Map_Fn: function () {
let pi = 3.14159265358979324 * 3000.0 / 180.0;
let x = this.data.longitude - 0.0065;
let y = this.data.latitude - 0.006;
let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * pi);
let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * pi);
this.setData({
longitude: z * Math.cos(theta),
latitude: z * Math.sin(theta),
markers: [
{
id: '1',
latitude: z * Math.sin(theta),
longitude: z * Math.cos(theta),
iconPath: '/images/api_logo.png',
callout: {
display: 'ALWAYS',
content: '嘉善新西塘孔雀城1'
}//真机里显示
}
]
});
console.log("计算过后的经度"+x);
console.log("计算过后的纬度"+y);
}
});

参考网址:https://blog.csdn.net/coolypf/article/details/8569813
百度小程序-map组件定位的更多相关文章
- 微信小程序----map组件实现检索【定位位置】周边的POI
效果图 实现方法 地图采用微信小程序提供的map组件: 周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据. WXML <view class="m ...
- 小程序 map组件问题 cover-view问题
使用小程序的组件map时 在开发者工具上一切顺利 但是在真机预览时 发现地图的层级是最高的 任何标签都覆盖不了它 调整z-index值并没有什么效果 原因是 微信小程序的map.video.canva ...
- 微信小程序map组件z-index的层级问题
说起微信小程序的map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦,但是在实际小程序的试用过程中还是存在点问题的.如下情景:刚开始接入map组件的时候是在微信开发工具的模拟器上预览的 ...
- 微信小程序~map组件z-index无效
因项目需要,以map为背景,上面悬浮有其他组件.微信开发者工具测试时一切正常,但是真机测试时地图组件却把所有的组件覆盖,检查z-index设置,一切正常,地图组件层级也在这些组件的下面,为什么会被覆盖 ...
- 小程序map组件默认层级最高,并且不能设置的解决方案
map组件默认在最上面,若要设置像ofo那样的按钮有两个方法,一是用控件设置,控件就是controls属性,控件只能显示图片,不能显示文字之类的.二是用cover-view组件,这个组件就是悬浮在一些 ...
- 微信小程序Map组件踩坑日记
刚刚又发生一个bug,搞得我头皮发麻,本来该美滋滋的回家准备度过愉快的周末,瞬间变成了日常修bug,来,开始填坑之路 情景再现: 首先说一说我们项目的需求, 点击下方,弹出抽屉 点击对应的地图打开相应 ...
- 百度小程序-swiper组件
.swan <!-- 轮播图S --> <view class="swiper-box"> <swiper class="banner&qu ...
- 百度小程序自定义通用toast组件
百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在 ...
- 百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板
百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也 ...
随机推荐
- php Closure类 闭包 匿名函数
php匿名函数 匿名函数就是没有名称的函数.匿名函数可以赋值给变量,还能像其他任何PHP对象那样传递.不过匿名函数仍是函数,因此可以调用,还可以传入参数.匿名函数特别适合作为函数或方法的回调. 如: ...
- ORA-02298问题处理
参考:http://blog.163.com/yvtong@126/blog/static/8753524720132223343722/ ORA-39083: Object type REF_CON ...
- Hive 窗口函数之 lead() over(partition by ) 和 lag() over(partition by )
lead函数用于提取当前行前某行的数据 lag函数用于提取当前行后某行的数据 语法如下: lead(expression,offset,default) over(partition by ... o ...
- js对url的编码和解码
最近做公众号相关, 需要在公众号里面配菜单, 才发现菜单的链接部分是编码过的, 如这样http%3A%2F%2Fw3cschool.cn%2Fmy%20test.asp%3Fname%3Dst%C3% ...
- 校内模拟赛 : Rima —— 字典树+树形DP
首先说一下,对一个刚学Trie树的蒟蒻来说(就是我),这道题是一道好题.Trie树比较简单,所以就不详细写了. Rima 内存限制:256 MiB 时间限制:1000 ms 标准输入输出 题目类型:传 ...
- 10 (H5*) js第10天 正则表达式、深浅拷贝
目录: 1:浅拷贝 2: 深拷贝 3:遍历DOM树 4:正则表达式 5:正则表达式的创建方式 6:字符串中的正则表达式 7:真数组和伪数组 8: escape()和unescapt() 编码和 解 ...
- CentOS7通过SpeedTest工具测速
首先要安装SpeedTest工具,这里提供两种方法安装SpeedTest: 一.通过直接下载SpeedTest脚本,给权限运行脚本即可 [root@bogon ~]#wget -O speedtest ...
- spring-第四篇之让bean获取所在的spring容器
1.如上一篇文章所述,有时候bean想发布一些容器事件,就需要先获取spring容器,然后将Event交由spring容器将事件发布出去. 为了让bean获取它所在的spring容器,可以让该bean ...
- redis setNx方法
Redis有一系列的命令,特点是以NX结尾,NX是Not eXists的缩写,如SETNX命令就应该理解为:SET if Not eXists.这系列的命令非常有用,这里讲使用SETNX来实现分布式锁 ...
- 自己做的html5手机站点
这个站点採用html5+css3+jquerymobile 仅仅开发了前台的功能,前台的界面比較美观,后端不方便放上,各位有空能够自己开发这个站点的界面有參考各个菜谱站点的页面的样式,可是又不一样,是 ...