地图测试
This commit is contained in:
parent
dd2a0a180d
commit
ae2fff945f
GPG Key ID:
BD85FF18B373C341
@ -59,6 +59,13 @@
|
||||
"navigationBarTitleText": "商品页",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/map/map",
|
||||
"style": {
|
||||
"navigationBarTitleText": "地图",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
154
src/pages/map/calc.js
Normal file
154
src/pages/map/calc.js
Normal file
@ -0,0 +1,154 @@
|
||||
/**
|
||||
* Created by Wandergis on 2015/7/8.
|
||||
* 提供了百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换
|
||||
*/
|
||||
|
||||
//定义一些常量
|
||||
let x_PI = 3.14159265358979324 * 3000.0 / 180.0;
|
||||
let PI = 3.1415926535897932384626;
|
||||
let a = 6378245.0;
|
||||
let ee = 0.00669342162296594323;
|
||||
|
||||
/**
|
||||
* 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
|
||||
* 即 百度 转 谷歌、高德
|
||||
* @param bd_lon
|
||||
* @param bd_lat
|
||||
* @returns {*[]}
|
||||
*/
|
||||
export let bd09ToGcj02 = (bd_lon, bd_lat) => {
|
||||
let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
|
||||
let x = bd_lon - 0.0065;
|
||||
let y = bd_lat - 0.006;
|
||||
let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
|
||||
let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
|
||||
let gg_lng = z * Math.cos(theta);
|
||||
let gg_lat = z * Math.sin(theta);
|
||||
return [gg_lng, gg_lat]
|
||||
}
|
||||
|
||||
export let wgs84ToBd09 = (lng, lat) => {
|
||||
lng = Number(lng)
|
||||
lat = Number(lat)
|
||||
|
||||
let gcj02 = wgs84ToGcj02(lng,lat)
|
||||
return gcj02ToBd09(gcj02[0],gcj02[1])
|
||||
}
|
||||
|
||||
/**
|
||||
* 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
|
||||
* 即谷歌、高德 转 百度
|
||||
* @param lng
|
||||
* @param lat
|
||||
* @returns {*[]}
|
||||
*/
|
||||
export let gcj02ToBd09 = (lng, lat) => {
|
||||
let z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
|
||||
let theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
|
||||
let bd_lng = z * Math.cos(theta) + 0.0065;
|
||||
let bd_lat = z * Math.sin(theta) + 0.006;
|
||||
return [bd_lng, bd_lat]
|
||||
}
|
||||
|
||||
/**
|
||||
* WGS84转GCj02
|
||||
* @param lng
|
||||
* @param lat
|
||||
* @returns {*[]}
|
||||
*/
|
||||
export let wgs84ToGcj02 = (lng, lat) => {
|
||||
lng = Number(lng)
|
||||
lat = Number(lat)
|
||||
console.log("wgs84ToGcj02",lng,lat)
|
||||
if (out_of_china(lng, lat)) {
|
||||
return [lng, lat]
|
||||
} else {
|
||||
let dlat = transformLat(lng - 105.0, lat - 35.0);
|
||||
let dlng = transformLng(lng - 105.0, lat - 35.0);
|
||||
let radlat = lat / 180.0 * PI;
|
||||
let magic = Math.sin(radlat);
|
||||
magic = 1 - ee * magic * magic;
|
||||
let sqrtmagic = Math.sqrt(magic);
|
||||
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
|
||||
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
|
||||
let mglat = lat + dlat;
|
||||
let mglng = lng + dlng;
|
||||
return [mglng, mglat]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* GCJ02 转换为 WGS84
|
||||
* @param lng
|
||||
* @param lat
|
||||
* @returns {*[]}
|
||||
*/
|
||||
export let gcj02ToWgs84 = (lng, lat) => {
|
||||
if (out_of_china(lng, lat)) {
|
||||
return [lng, lat]
|
||||
} else {
|
||||
let dlat = transformLat(lng - 105.0, lat - 35.0);
|
||||
let dlng = transformLng(lng - 105.0, lat - 35.0);
|
||||
let radlat = lat / 180.0 * PI;
|
||||
let magic = Math.sin(radlat);
|
||||
magic = 1 - ee * magic * magic;
|
||||
let sqrtmagic = Math.sqrt(magic);
|
||||
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
|
||||
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
|
||||
let mglat = lat + dlat;
|
||||
let mglng = lng + dlng;
|
||||
return [lng * 2 - mglng, lat * 2 - mglat]
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否在国内，不在国内则不做偏移
|
||||
* @param lng
|
||||
* @param lat
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export function out_of_china(lng, lat) {
|
||||
return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
|
||||
}
|
||||
|
||||
//百度坐标转高德（传入经度、纬度）
|
||||
export function bMapToAMap(bd_lng, bd_lat) {
|
||||
let X_PI = Math.PI * 3000.0 / 180.0;
|
||||
let x = bd_lng - 0.0065;
|
||||
let y = bd_lat - 0.006;
|
||||
let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
|
||||
let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
|
||||
let gg_lng = z * Math.cos(theta);
|
||||
let gg_lat = z * Math.sin(theta);
|
||||
return {lng: gg_lng, lat: gg_lat}
|
||||
}
|
||||
|
||||
//高德坐标转百度（传入经度、纬度）
|
||||
export function aMapToBMap(gg_lng, gg_lat) {
|
||||
let X_PI = Math.PI * 3000.0 / 180.0;
|
||||
let x = gg_lng, y = gg_lat;
|
||||
let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
|
||||
let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
|
||||
let bd_lng = z * Math.cos(theta) + 0.0065;
|
||||
let bd_lat = z * Math.sin(theta) + 0.006;
|
||||
return {
|
||||
lng: bd_lng,
|
||||
lat: bd_lat,
|
||||
};
|
||||
}
|
||||
56
src/pages/map/map.vue
Normal file
56
src/pages/map/map.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<view class="w-full h-full">
|
||||
<map style="width: 750rpx" class="h-full"
|
||||
:markers="ctx.markers"
|
||||
:longitude="ctx.location.longitude"
|
||||
:latitude="ctx.location.latitude"></map>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onLoad} from "@dcloudio/uni-app";
|
||||
import {reactive} from "vue";
|
||||
import {wgs84ToGcj02} from "./calc.js"
|
||||
const ctx = reactive({
|
||||
location: {
|
||||
longitude: 0,
|
||||
latitude: 0
|
||||
},
|
||||
markers: []
|
||||
})
|
||||
|
||||
function getLocation() {
|
||||
uni.getLocation({
|
||||
type: "wgs84",
|
||||
success: (res) => {
|
||||
console.log(`当前位置: ${res.longitude},${res.latitude}`)
|
||||
let location = wgs84ToGcj02(res.longitude, res.latitude)
|
||||
ctx.location = {
|
||||
longitude: location[0],
|
||||
latitude: location[1]
|
||||
}
|
||||
ctx.markers = [{
|
||||
...ctx.location,
|
||||
id: 0
|
||||
}]
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err, `获取位置失败: ${err.errMsg}`)
|
||||
uni.showModal({
|
||||
title: '获取位置失败',
|
||||
content: `${err.errMsg}`,
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
getLocation()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@ -59,6 +59,7 @@
|
||||
|
||||
<button @tap="back">返回上一页</button>
|
||||
<button @tap="mockRequest">模拟请求</button>
|
||||
<button @tap="toMap">打开地图</button>
|
||||
<button type="primary" @tap="mockLogin">模拟登录</button>
|
||||
<button type="warn" @tap="cleanStorage">清空本地存储</button>
|
||||
</template>
|
||||
@ -80,6 +81,12 @@ function vibrateLongHandler() {
|
||||
uni.vibrateLong({})
|
||||
}
|
||||
|
||||
function toMap(){
|
||||
uni.navigateTo({
|
||||
url: "/pages/map/map"
|
||||
})
|
||||
}
|
||||
|
||||
function mockRequest(){
|
||||
uni.request({
|
||||
url: "/anything"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user