H5移动端调用百度或高德地图

2023-07-09 01:04| 来源: 网络整理| 查看: 265

vue使用Vant 开发移动端，设计到地图导航，因H5定位不精确，考虑直接使用百度地图或者高德地图进行导航，这里记录一下H5打开百度或高德地图的方法：

一、选择打开百度或者高德地图，使用的是vant的ActionSheet（可全局引入，也可组件引入，我这里是单组件引入）

Html部分

导航

Js部分

import Vue from 'vue' import { ActionSheet } from 'vant' Vue.use(ActionSheet) export default { data() { return { isShowSheet: false, sheetList: [ { name: '百度地图', id: 1, }, { name: '高德地图', id: 2, }, ], latitude: 0, longitude: 0, } }, mounted() {}, methods: { handleSheetSelect(action) { this.navToMap(this.latitude, this.longitude, '目的地', action.id) }, /** * 打开高德或百度地图 * @param {*} latitude * @param {*} longitude * @param {*} name 导航目的地名称 * @param {*} type 1 百度地图 2 高德地图 */ navToMap(latitude = 0, longitude = 0, name = '目的地', type = 1) { let url let lat, long const u = navigator.userAgent //判断ios const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //判断Android const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 if (type == 1) { //百度地图把获取到的非百度坐标转为百度坐标 lat = latitude long = longitude } else if (type == 2) { //高德地图把获取到的非GCJ-02坐标转为GCJ-02(火星坐标) lat = latitude long = longitude } if (isAndroid) { switch (type) { case 1: //百度地图 url = `http://api.map.baidu.com/marker?location=${lat},${long}&title=${name}&content=${name}&output=html` break case 2: //高德地图 url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${lat}&lon=${long}&dev=0` break default: break } } else if (isIOS) { switch (type) { case 1: //百度地图 url = `http://api.map.baidu.com/marker?location=${lat},${long}&title=${name}&content=${name}&output=html` break case 2: //高德地图 url = `http://uri.amap.com/marker?position=${long},${lat}&name=${name}&src=mypage&coordinate=gaode&callnative=00` break default: break } } if (!validatenull(url)) { window.location.href = url } }, }, }

二、关于坐标系之间的转换：

1.判断经纬度是否超出中国境内

export function isLocationOutOfChina(latitude, longitude) { if (longitude < 72.004 || longitude > 137.8347 || latitude < 0.8293 || latitude > 55.8271) return true; return false; }

2.将WGS-84(国际标准)转为GCJ-02(火星坐标):（这里要考虑坐标点是否在国内）

export function transformFromWGSToGCJ(latitude, longitude) { var ee = 0.00669342162296594323; var a = 6378245.0; var pi = 3.14159265358979324; if (isLocationOutOfChina(latitude, longitude)) { //如果坐标点在境外，这里进行处理 return { latitude: 0, longitude: 0 }; } else { var adjustLat = transformLatWithXY(longitude - 105.0, latitude - 35.0); var adjustLon = transformLonWithXY(longitude - 105.0, latitude - 35.0); var radLat = latitude / 180.0 * pi; var magic = Math.sin(radLat); magic = 1 - ee * magic * magic; var sqrtMagic = Math.sqrt(magic); adjustLat = (adjustLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi); adjustLon = (adjustLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi); latitude = latitude + adjustLat; longitude = longitude + adjustLon; } return { latitude: latitude, longitude: longitude }; }

3.将GCJ-02(火星坐标)转为百度坐标

export function transformFromGCJToBaidu(latitude, longitude) { var pi = 3.14159265358979324 * 3000.0 / 180.0; var z = Math.sqrt(longitude * longitude + latitude * latitude) + 0.00002 * Math.sin(latitude * pi); var theta = Math.atan2(latitude, longitude) + 0.000003 * Math.cos(longitude * pi); var a_latitude = (z * Math.sin(theta) + 0.006); var a_longitude = (z * Math.cos(theta) + 0.0065); return { latitude: a_latitude, longitude: a_longitude }; }

4.将百度坐标转为GCJ-02(火星坐标)

export function transformFromBaiduToGCJ(latitude, longitude) { var xPi = 3.14159265358979323846264338327950288 * 3000.0 / 180.0; var x = longitude - 0.0065; var y = latitude - 0.006; var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * xPi); var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * xPi); var a_latitude = z * Math.sin(theta); var a_longitude = z * Math.cos(theta); return { latitude: a_latitude, longitude: a_longitude }; }

其他的坐标系之间的转换可以根据需求依据上面的方法进行转换

【本文地址】

公司简介

联系我们