地图测试

src/pages.json

@@ -59,6 +59,13 @@
         "navigationBarTitleText": "商品页",
         "enablePullDownRefresh": false
       }
+    },
+    {
+      "path": "pages/map/map",
+      "style": {
+        "navigationBarTitleText": "地图",
+        "enablePullDownRefresh": false
+      }
     }
   ],
   "globalStyle": {

src/pages/map/calc.js

@@ -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,
+    };
+}

src/pages/map/map.vue

@@ -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>

src/pages/test-page/test-page.vue

@@ -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"