js使用url调用地图导航

news/2024/7/19 14:52:48 标签: javascript, html5, js
把obj对象处理为url的携带参数
javascript">function queryStringFromParams(params) {
  const arr = []
  for (const k in params) {
    const val = encodeURIComponent(params[k])
    arr.push(`${k}=${val}`)
  }
  return arr.join('&')
}
定义常量
javascript">const PI = Math.PI
// 长半轴
const SMA = 6378245.0
// 地球偏率
const EOB = 0.00669342162296594323
经纬度偏转
javascript">/**
 * 判断是否在国内,不在国内不做偏移
 *
 * @param lng
 * @param lat
 * @return
 */
function outOfChina(lng, lat) {
  if (lng < 72.004 || lng > 137.8347) {
    return true
  } else if (lat < 0.8293 || lat > 55.8271) {
    return true
  }
  return false
}
WGS84转GCJ02(火星坐标系)
javascript">
/**
 * 纬度转换
 *
 * @param lng
 * @param lat
 * @return
 */
function transformLat(lng, lat) {
  let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
  ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
  ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
  ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
  return ret
}

/**
 * 经度转换
 *
 * @param lng
 * @param lat
 * @return
 */
function transformLng(lng, lat) {
  let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
  ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
  ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
  ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
  return ret
}
/**
 * WGS84转GCJ02(火星坐标系)
 *
 * @param lng WGS84坐标系的经度
 * @param lat WGS84坐标系的纬度
 * @return 火星坐标数组
 */
function wgs84ToGCJ02(lng, lat) {
  if (outOfChina(lng, lat)) {
    return [lng, lat]
  }
  let dlat = transformLat(lng - 105.0, lat - 35.0)
  let dlng = transformLng(lng - 105.0, lat - 35.0)
  const radlat = lat / 180.0 * PI
  let magic = Math.sin(radlat)
  magic = 1 - EOB * magic * magic
  const sqrtmagic = Math.sqrt(magic)
  dlat = (dlat * 180.0) / ((SMA * (1 - EOB)) / (magic * sqrtmagic) * PI)
  dlng = (dlng * 180.0) / (SMA / sqrtmagic * Math.cos(radlat) * PI)
  const mglat = lat + dlat
  const mglng = lng + dlng
  return [mglng, mglat]
}
高德地图 移动web页面导航
javascript">/**
 * 高德地图 移动web页面导航
 * @param start  {lnglat:[lng, lat], city: string, name:string}  起始点
 * @param target [lnglat:[lng, lat], city: string, name:string]  终点
 * @param coordinate {string} 坐标系,默认 WGS84
 */
export function aMapNavigate(start, target, coordinate) {
  if (target.lnglat.filter(res => !isNaN(res) && res !== '').length !== 2) {
    alert('经纬度错误')
    return
  }
  const uri = 'https://uri.amap.com/navigation'
  let startLngLat = start.lnglat; let targetLnglat = target.lnglat
  coordinate = coordinate || 'wgs84'
  if (coordinate === 'wgs84') {
    if (startLngLat[0] && startLngLat[1]) {
      startLngLat = wgs84ToGCJ02(startLngLat[0], startLngLat[1])
    } else {
      startLngLat = ['', '']
    }
    targetLnglat = wgs84ToGCJ02(targetLnglat[0], targetLnglat[1])
    coordinate = 'gaode'
  }
  const params = {
    from: `${startLngLat.join(',')},${start.name || '起点'}`,
    to: `${targetLnglat.join(',')},${target.name || '终点'}`,
    coordinate: coordinate,
    mode: 'car'
  }

  const queryString = queryStringFromParams(params)
  const url = `${uri}?${queryString}`
  location.href = url
}
百度地图 移动web页面导航
javascript">/**
 * 百度地图 移动web页面导航
 * @param start  {lnglat:[lng, lat], city: string, name:string}  起始点
 * @param target [lnglat:[lng, lat], city: string, name:string]  终点
 */
export function baiduNavigate(start, target, coordinate) {
  if (target.lnglat.filter(res => !isNaN(res) && res !== '').length !== 2) {
    alert('经纬度错误')
    return
  }
  const uri = 'api.map.baidu.com/direction'
  const params = {
    origin: `name:${start.name || '起点'}|latlng:${start.lnglat.reverse().join(',')}`,
    destination: `name:${target.name || '终点'}|latlng:${target.lnglat.reverse().join(',')}`,
    mode: 'driving',
    output: 'html',
    'origin_region': start.city,
    'destination_region': target.city,
    coord_type: coordinate || 'wgs84',
    src: 'webapp.jczy.qiyu'
  }

  const queryString = queryStringFromParams(params)
  const url = `http://${uri}?${queryString}`
  location.href = url
}
腾讯地图 移动web页面导航
javascript">/**
 * 腾讯 移动web页面导航
 * @param start  {lnglat:[lng, lat], city: string, name:string}  起始点
 * @param target [lng, lat]  终点
 */
export function tengxunNavigate(start, target) {
  if (target.lnglat.filter(res => !isNaN(res) && res !== '').length !== 2) {
   alert('经纬度错误')
    return
  }
  const url = `https://apis.map.qq.com/uri/v1/routeplan?type=bus&from=${start.name || '起点'}&fromcoord=${start.lnglat.reverse().join(',')}&to=${target.name || '终点'}&tocoord=${target.lnglat.reverse().join(',')}&policy=1&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77`
  location.href = url
}

http://www.niftyadmin.cn/n/736547.html

相关文章

it工程师和码农的区别_百战程序员:大学生不想成为低级码农怎么办

首先&#xff0c;有这个问题的人一定是对自己负责的人&#xff0c;还没毕业就开始对自己的未来开始考虑了。其次&#xff0c;现在的技术积累和学习成绩应该是一般般&#xff0c;我猜没什么项目经验&#xff0c;虽然想努力但是还是很迷茫&#xff0c;不知道如何下手。再者&#…

js获取当前位置

js获取当前位置&#xff0c;首先需要https下&#xff0c;而且需要允许浏览器获取位置 function getLocation() {return new Promise((resolve, reject) > {navigator.geolocation.getCurrentPosition((pos) > {const coords pos.coords || {}const { latitude, longitu…

api在毫秒级触发了两次_Swoole 定时器实现毫秒级任务调度

Swoole 定时器简介Swoole 提供了异步高精度定时器功能&#xff0c;该功能类似 JavaScript 的 setInterval/setTimeout&#xff0c;粒度为毫秒级&#xff0c;底层基于 epoll_wait&#xff08;异步&#xff09;和 setitimer&#xff08;同步&#xff09;实现&#xff0c;数据结构…

判断是否在微信浏览器

function isWechat() {var ua window.navigator.userAgent.toLowerCase()if (ua.indexOf(micromessenger) ! -1) {return true} else {return false}

python删除线程_python 在删除文件的时候检测该文件是否被其他线程或者进程占用?...

永远不要忘记&#xff1a;跨平台特性是Python的血液和命脉。在Linux下进程正在使用的文件&#xff0c;是不妨碍其他进程去移动/删除/更名的。因为在Linux下由inode确定文件&#xff0c;inode和文件路径虽然存在对应关系&#xff0c;但本质上是分离的。删除了某进程正在使用的文…

服务器链接无痛刷新token

使用axios请求无痛刷新token示例 use strict import axios from axios const URL / // 请求地址 // 创建一个axios实例 const service axios.create({baseURL: URL, // 请求urlwithCredentials: true, // 当跨域请求时发送cookietimeout: 0 // 请求超时时间,5000(单位毫秒) …

starccm实例教程_STAR CCM实例教程1

STAR CCM有限元分析软件的实例教程1It appears from the plot that there is turbulence generated aft of the cylinder, but we are frankly not quite sure what to make of the plot.35) We make a scalar plot of the turbulent kinetic energy:Like the previous plot, i…

js时间格式化

方法 function format(time, fmt yyyy-MM-dd hh:mm:ss) {if (arguments.length 0) {return }const timer new Date(time)var o {M: timer.getMonth() 1, // 月份d: timer.getDate(), // 日h: timer.getHours(), // 小时m: timer.getMinutes(), // 分s: timer.getSeconds(…