微信小程序-地图上的图标计算旋转值朝向经纬度计算

这篇具有很好参考价值的文章主要介绍了微信小程序-地图上的图标计算旋转值朝向经纬度计算。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

废话不多说,开整
微信小程序-地图上的图标计算旋转值朝向经纬度计算,微信小程序,微信小程序,小程序

微信小程序-地图上的图标计算旋转值朝向经纬度计算,微信小程序,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-596121.html

// 参数为寄件人经纬度和收件人经纬度 
// 根据寄收件人经纬度弧度π进行rotate旋转计算
const getRotate = (po1, po2) => {
    if (!(po1 && po2)) return 0
    const lng_a = po1.longitude
    const lat_a = po1.latitude
    const lng_b = po2.longitude
    const lat_b = po2.latitude
    const a = ((90 - lat_b) * Math.PI) / 180
    const b = ((90 - lat_a) * Math.PI) / 180
    const AOC_BOC = ((lng_b - lng_a) * Math.PI) / 180
    const cosc = Math.cos(a) * Math.cos(b) + Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC)
    const sinc = Math.sqrt(1 - cosc * cosc)
    const sinA = (Math.sin(a) * Math.sin(AOC_BOC)) / sinc
    const A = (Math.asin(sinA) * 180) / Math.PI
    let rotate = 0
    if (lng_b > lng_a && lat_b > lat_a) rotate = A
    else if (lng_b > lng_a && lat_b < lat_a) rotate = 180 - A
    else if (lng_b < lng_a && lat_b < lat_a) rotate = 180 - A
    else if (lng_b < lng_a && lat_b > lat_a) rotate = 360 + A
    else if (lng_b > lng_a && lat_b == lat_a) rotate = 90
    else if (lng_b < lng_a && lat_b == lat_a) rotate = 270
    else if (lng_b == lng_a && lat_b > lat_a) rotate = 0
    else if (lng_b == lng_a && lat_b < lat_a) rotate = 180

    if (rotate > 360) {
      rotate = rotate - 360
    }
    return rotate
  }

到了这里,关于微信小程序-地图上的图标计算旋转值朝向经纬度计算的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序引入外部矢量图标(阿里巴巴矢量图标)

      进入阿里巴巴矢量图标库 搜索想要的矢量图标并加入购物车,点击右上角购物车 将图标添加至项目 更改项目设置 将字体格式设置为TTF Base64   点击下载至本地  在微信小程序中新建文件夹  将下载到本地的文件中的iconfont.css拖拽到微信小程序新建的文件夹中  更改后缀名

    2024年02月16日
    浏览(54)
  • 微信小程序使用iconfont图标

    一、第一步进入iconfont网站 1.添加需要使用的图标,点击购物车图标加入项目   2.点击右上角的购物车按钮    3.点击添加项目按钮,选择一个项目添加即可,若没有项目,可以创建   4.添加完项目会自动跳转到下一个页面,点击font class 生成在线链接   5.复制生成的链接,去

    2024年02月08日
    浏览(48)
  • 高德地图实现-微信小程序地图导航

    1、在高德开放平台注册成为开发者 2、申请开发者密钥(key)。 3、下载并解压高德地图微信小程序SDK 注册账号(https://lbs.amap.com/)) 申请小程序应用的 key 应用管理(https://console.amap.com/dev/key/app)) - 我的应用 - 创建新应用 生成的 key 即可用在程序中 下载相关 sdk 文件,导入 amap-

    2024年02月08日
    浏览(49)
  • 微信小程序 实现可拖动悬浮图标

    效果图 (1)wxml (2)js (3)wxss

    2024年02月04日
    浏览(58)
  • 微信小程序引入和风天气图标库

    npm导入和风天气的图标库后使用没有效果,就在网上查询了下怎么解决,然后动手尝试一下。 参考文章 1. 下载图标文件(链接),解压后大致这样 2. 在transfonter网站将需要的图标字体转成Base64,在fontfonts文件下 选择上传 下载 3. 解压后把stylesheet.css复制到小程序的某个文件夹下

    2024年02月04日
    浏览(41)
  • 微信小程序使用字体图标——链接引入

    目录 1.下载字体图标  1.选择需要的图标加入购物车添加到项目 2.查看项目  3.生成在线链接   4.复制生成的链接 等下放到iconfont.json中​编辑 2.引入链接 1.下载  2.生成iconfont.json文件 3. 在iconfont.json中 放入生成的链接 4.需要重新编译小程序之后在终端执行 5.在app.json中引入字

    2024年02月16日
    浏览(70)
  • 微信小程序地图导航

    官方坐标获取:https://lbs.qq.com/getPoint/ 如:重庆解放碑 纬度:29.557284 经度:106.577153 微信小程序文档:https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.openLocation.html

    2024年02月11日
    浏览(31)
  • 微信小程序(五)地图

            作者开发《目的地到了》需要满足用户选取地址作为目的地的需求,所以需要使用到地图。作者用的是腾讯地图,这里介绍下技术实现。         引入腾讯地图的组件包微信小程序JavaScript SDK | 腾讯位置服务,根据经纬度调用里面的api才能获取周围的地图数据展示

    2024年02月03日
    浏览(26)
  • 微信小程序,高德地图

    高德开放平台: 注册账号(https://lbs.amap.com/) 去高德地图平台申请小程序应用的 key 应用管理(https://console.amap.com/dev/key/app) - 我的应用 - 创建新应用 生成的 key 即可用在程序中 下载相关 sdk 文件,导入 amap-wx.js 到项目中:https://lbs.amap.com/api/wx/download 创建 AMapWX 对象 api getRegeo 获取

    2024年02月09日
    浏览(36)
  • 微信小程序引入地图

    微信小程序引入地图 1.可以直接在页面设置map标签显示出地图,然后通过设置其大小控制地图显示面积。 2.可以通过scale改变地图缩放级别和longitude和latitude属性设置地图中心的经纬度。 3.可以通过markers属性设置地图标点 引入的数组必须是一下格式: 如果是从接口获取的数据

    2024年02月09日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包