百度小程序-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还不是狠完整.而且官方提供的弹窗组件也 ...
 
随机推荐
- 连接超时(connect timed out)和读取超时(Read timed out)
			
设置连接超时和读取超时方法: RequestConfig config=RequestConfig.custom() .setConnectTimeout(10000) // 设置连接超时时间 10秒 ...
 - 组件Component详解
			
[转]https://www.cnblogs.com/moqiutao/p/8328931.html
 - NOIP2011  洛谷P1315 观光公交
			
题目传送门 先解释一下数组的意义: d[i]表示公交车从第i个点到第i+1个点需要的时间 pas结构体中:t表示这个乘客到公交站牌的时间,u表示起点,v表示终点 wait[i]表示公交车在第i个站点等 ...
 - Socket错误详解及处理方法
			
例如错误代码10061, 说明服务器已经找到,但连接被服务器拒绝, 连接失败原因可能是: 端口号设置错误: 2.服务器没有处于监听状态 (即ServerSocket –>Active=true) ...
 - ajax总结及案例
			
一.实验简介 目的:检验输入登录名在数据库中是否存在,如果存在,当鼠标移出登录名框后,会提示用户名已存在,并且鼠标指针自动回到登录名框内. 操作步骤: 1.获取登录名的值 2.根据获取的登录名,组织查 ...
 - Entity Framework Code First (五)Fluent API - 配置关系 转载 https://www.cnblogs.com/panchunting/p/entity-framework-code-first-fluent-api-configuring-relationships.html
			
上一篇文章我们讲解了如何用 Fluent API 来配置/映射属性和类型,本文将把重点放在其是如何配置关系的. 文中所使用代码如下 public class Student { public int ...
 - Selenium WebDriver UI对象库
			
UI对象库:使用配置文件存储测试页面上的定位和定位表达式,做到定位数据和程序的分离. 第一步:实现工具类Object工具类,供测试程序调用. /** * 使用配置文件存储测试页面上的定位和定位表达式, ...
 - MySQL 查询语句--------------进阶5:分组查询
			
#进阶5:分组查询 /* select 分组函数,列(要求出现在group by的后面) from 表 [where 筛选条件] group by 分组的列表 [order by 子句] 注意: 查询 ...
 - 爬虫(十一)—— XPath总结
			
目录 XPath总结 一.何为XPath 二.XPath语法 1.语法 2.实例 三.XPath轴 1.XPath轴语法 2.XPath轴实例 四.XPath运算符 XPath总结 一.何为XPath ...
 - JSP基础--会话跟踪技术、cookie、session
			
会话跟踪技术 1 什么是会话跟踪技术 我们需要先了解一下什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如你给10086打个电话,你就是客户端,而10 ...