百度地图，高德地图定位

<template>
  <div class="container">
    <div class="top">
      <div class="addr">
        <svg-icon icon-class="location" style=" 16px; height: 16px" />{{
          dingAddress
        }}
      </div>
      <van-loading color="#587bf7" size="24" v-if="GeoLoading"
        >定位中...</van-loading
      >
      <div class="refs" @click="loadAmap" v-if="!GeoLoading">重新定位</div>
    </div>
  </div>
</template>

<script>
import {
  NavBar,
  Toast,
  Button,
  Tabbar,
  TabbarItem,
  Grid,
  GridItem,
  Loading,
} from "vant";
import { mapActions, mapMutations, mapState } from "vuex"; // createNamespacedHelpers
import FooterTabbar from "components/FooterTabbar";
import { eventList } from "@/api/event";

import { getInfo, eventMessageList } from "@/api/user";
import { setToken } from "@/utils/auth";
import BMap from "BMap";
import { GaoDeMap, GPS } from "@/utils/map.js";


export default {
  name: "home",
  data() {
    return {
      GeoLoading: true,
      value: 1,
      NumMesaage: 0,
      dingAddress: "",
      lng: "",
      lat: "",
      page: 1,
    };
  },
  components: {
    [Button.name]: Button,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [NavBar.name]: NavBar,
    FooterTabbar,
    [Loading.name]: Loading,
  },
  computed: {},
  async created() {
    const token = this.$route.query.token;
    if (token) {
      this.getUserInfo(token);
    } else {
      this.getNum();
      // this.getLocaltion();
      this.loadAmap();
    }
  },
  methods: {
    goPage(name) {
      this.$router.push({
        path: name,
        query: {
          // status: val,
        },
      });
    },
    onClickLeft() {
      // Toast("返回");
    },

    //根据token获取用户信息
    async getUserInfo(token) {
      setToken(token);
      await getInfo(token);
      this.goToEventList(0);
    },

    //-------------------------------------------------定位start
    // refreshAddr() {
    //   this.getLocaltion();
    //   this.getNum();
    // },
    // getLocaltion() {
    //   navigator.geolocation.getCurrentPosition(this.show, this.localtionError, {
    //     enableHighAccuracy: true,
    //     timeout: 2000,
    //     maximumAge: 60 * 1000,
    //   });
    // },
    // show(position) {
    //   console.log(position);
    //   this.lng = position.coords.longitude;
    //   this.lat = position.coords.latitude;
    //   let newPoint = new BMap.Point(this.lng, this.lat);
    //   let gc = new BMap.Geocoder();
    //   gc.getLocation(newPoint, (rs) => {
    //     this.dingAddress = rs.address;
    //   });
    // },
    // localtionError(error) {
    //   console.log(error.code);
    //   this.dingAddress = "无法获取位置信息";
    // },
    //-------------------------------------------------定位end
    //---------------------------------定位新
    loadAmap() {
      let _this = this;
      _this.GeoLoading = true;
      GaoDeMap.init().then((AMap) => {
        AMap.plugin("AMap.Geolocation", function () {
          var geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
          });
          geolocation.getCurrentPosition(function (status, result) {
            if (status === "complete") {
              onComplete(result);
            } else {
              onError(result);
            }
          });

          function onComplete(data) {
            // data是具体的定位信息
            let aTOb = GPS.bd_encrypt(data.position.lat, data.position.lng);
            _this.lng = aTOb.lon;
            _this.lat = aTOb.lat;
            _this.getAddressByGD(data.position.lng, data.position.lat);
            _this.GeoLoading = false;
          }

          function onError(data) {
            // 定位出错
            _this.GeoLoading = false;
            _this.lng = "";
            _this.lat = "";
            _this.dingAddress = "无法获取位置信息";
            // 调用ip定位
          }
        });
      });
    },
    getAddressByGD(lng, lat) {
      let _this = this;
      var lnglat = new AMap.LngLat(lng, lat);
      AMap.plugin("AMap.Geocoder", function () {
        var geocoder = new AMap.Geocoder({
          radius: 500,
          extensions: "all",
        });
        geocoder.getAddress(lnglat, function (status, result) {
          if (status === "complete" && result.info === "OK") {
            _this.dingAddress = result.regeocode.formattedAddress;
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  height: auto;
   100%;
  padding-bottom: 50px;
  background-color: #f2f2f2;
}
.top {
  display: flex;
  background-color: #ffffff;
  padding: 15px 20px;
  height: 20%;
  background: rgb(88, 123, 247);
  flex-flow: column;
  color: #fff;
  font-size: 24px;

  .addr {
    margin: 20px 0;
  }
  .refs {
    margin-left: 32px;
  }
  .alrm {
    margin-left: 32px;
    margin-top: 40px;
    span {
      color: yellow;
      font-size: 30px;
      font-weight: bold;
    }
  }
}
.nav-box {
  margin: 0 20px;
  // height: 186px;
  height: 13%;
  background: #fff;
  margin-top: -40px;
  padding: 0 20px;
}
.alrm-box {
  margin: 0 20px;
  background: #fff;
  margin-top: 16px;
  padding: 0 20px;
  height: 100%;
  .alrm-box-head {
    display: flex;
    align-items: center;
    font-size: 14px;
    justify-content: space-between;
  }
  .alrm-box-list {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-flow: column;
    border-top: 1px solid #c4b9b9;
    .list-sub {
      .list-sub-top {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #c4b9b9;
        padding-top: 6px;
        padding-bottom: 14px;
        .alrm-status {
          background: #5dbcfc;
          color: #fff;
          padding: 6px 12px;
          border-radius: 6px;
        }
      }
      .list-sub-bottom {
        display: flex;
        flex-flow: column;
        border-bottom: 1px solid #c4b9b9;

        .list-sub-bottom-adr {
          display: flex;
          justify-content: space-between;
          padding: 20px 0;
          .time-status {
            color: red;
          }
        }
        .list-sub-bottom-tis {
          display: flex;
          justify-content: space-between;
          padding-bottom: 30px;
          .tis-date {
            color: #918d8d;
          }
        }
      }
    }
  }
}
.banner {
   100%;
  height: calc(100vh - 150px);
  text-align: center;
  background: #ffffff;
  img {
     730px;
    height: 450px;
  }
}
.grid-list-btn {
  .title {
    margin-top: 8px;
    color: #fff;
    font-size: 28px;
  }
}
.now-value {
  padding: 0 15px;
  box-sizing: border-box;
  font-size: 16px;
  // line-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-list {
  margin: 15px;
  font-size: 24px;
  .icon {
    margin: 0 10px;
  }
}
.buttons {
  padding: 0 15px;
  font-size: 18px;
   100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  a {
    color: #333;
  }
}
</style>
export const BaiduMap = {
    init: function() {
        const BMapURL = 'http://api.map.baidu.com/api?v=3.0&ak=yr0FTvMYAK8tpkRjILGk7TihbmCfoeC1&callback=bMapInit'
　　　　 return new Promise((resolve, reject) => {
            // 如果已加载直接返回
            if (typeof BMap !== 'undefined') {
                resolve(BMap)
                return true
            }
            // 百度地图异步加载回调处理
            window.bMapInit = function() {
                console.log('百度地图脚本初始化成功...')
                resolve(BMap)
            };
            // 插入script脚本
            let scriptNode = document.createElement('script')
            scriptNode.setAttribute('type', 'text/javascript')
            scriptNode.setAttribute('src', BMapURL)
            document.body.appendChild(scriptNode)
        })
    }
}

export const GaoDeMap = {
    init: function() {
        const AMapURL = 'https://webapi.amap.com/maps?v=2.0&key=0b7594eeeaced4d3866313551e443ed3&plugin=AMap.Geocoder&callback=AMapInit'
　　　　 return new Promise((resolve, reject) => {
            // 如果已加载直接返回
            if (typeof AMap !== 'undefined') {
                resolve(AMap)
                return true
            }
            // 百度地图异步加载回调处理
            window.AMapInit = function() {
                console.log('高德地图脚本初始化成功...')
                resolve(AMap)
            };
            // 插入script脚本
            let scriptNode = document.createElement('script')
            scriptNode.setAttribute('type', 'text/javascript')
            scriptNode.setAttribute('src', AMapURL)
            document.body.appendChild(scriptNode)
        })
    }
}

export const GPS = {
    PI : 3.14159265358979324,
    x_pi : 3.14159265358979324 * 3000.0 / 180.0,
    delta : function (lat, lon) {
        // Krasovsky 1940
        //
        // a = 6378245.0, 1/f = 298.3
        // b = a * (1 - f)
        // ee = (a^2 - b^2) / a^2;
        var a = 6378245.0; //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
        var ee = 0.00669342162296594323; //  ee: 椭球的偏心率。
        var dLat = this.transformLat(lon - 105.0, lat - 35.0);
        var dLon = this.transformLon(lon - 105.0, lat - 35.0);
        var radLat = lat / 180.0 * this.PI;
        var magic = Math.sin(radLat);
        magic = 1 - ee * magic * magic;
        var sqrtMagic = Math.sqrt(magic);
        dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
        dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
        return {'lat': dLat, 'lon': dLon};
    },

    //WGS-84 to GCJ-02
    gcj_encrypt : function (wgsLat, wgsLon) {
        if (this.outOfChina(wgsLat, wgsLon))
            return {'lat': wgsLat, 'lon': wgsLon};

        var d = this.delta(wgsLat, wgsLon);
        return {'lat' : wgsLat + d.lat,'lon' : wgsLon + d.lon};
    },
    //GCJ-02 to WGS-84
    gcj_decrypt : function (gcjLat, gcjLon) {
        if (this.outOfChina(gcjLat, gcjLon))
            return {'lat': gcjLat, 'lon': gcjLon};

        var d = this.delta(gcjLat, gcjLon);
        return {'lat': gcjLat - d.lat, 'lon': gcjLon - d.lon};
    },
    //GCJ-02 to WGS-84 exactly
    gcj_decrypt_exact : function (gcjLat, gcjLon) {
        var initDelta = 0.01;
        var threshold = 0.000000001;
        var dLat = initDelta, dLon = initDelta;
        var mLat = gcjLat - dLat, mLon = gcjLon - dLon;
        var pLat = gcjLat + dLat, pLon = gcjLon + dLon;
        var wgsLat, wgsLon, i = 0;
        while (1) {
            wgsLat = (mLat + pLat) / 2;
            wgsLon = (mLon + pLon) / 2;
            var tmp = this.gcj_encrypt(wgsLat, wgsLon)
            dLat = tmp.lat - gcjLat;
            dLon = tmp.lon - gcjLon;
            if ((Math.abs(dLat) < threshold) && (Math.abs(dLon) < threshold))
                break;

            if (dLat > 0) pLat = wgsLat; else mLat = wgsLat;
            if (dLon > 0) pLon = wgsLon; else mLon = wgsLon;

            if (++i > 10000) break;
        }
        //console.log(i);
        return {'lat': wgsLat, 'lon': wgsLon};
    },
    //GCJ-02 to BD-09
    bd_encrypt : function (gcjLat, gcjLon) {
        var x = gcjLon, y = gcjLat;
        var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi);
        var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi);
        var bdLon = z * Math.cos(theta) + 0.0065;
        var bdLat = z * Math.sin(theta) + 0.006;
        return {'lat' : bdLat,'lon' : bdLon};
    },
    //BD-09 to GCJ-02
    bd_decrypt : function (bdLat, bdLon) {
        var x = bdLon - 0.0065, y = bdLat - 0.006;
        var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi);
        var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi);
        var gcjLon = z * Math.cos(theta);
        var gcjLat = z * Math.sin(theta);
        return {'lat' : gcjLat, 'lon' : gcjLon};
    },
    //WGS-84 to Web mercator
    //mercatorLat -> y mercatorLon -> x
    mercator_encrypt : function(wgsLat, wgsLon) {
        var x = wgsLon * 20037508.34 / 180.;
        var y = Math.log(Math.tan((90. + wgsLat) * this.PI / 360.)) / (this.PI / 180.);
        y = y * 20037508.34 / 180.;
        return {'lat' : y, 'lon' : x};
        /*
        if ((Math.abs(wgsLon) > 180 || Math.abs(wgsLat) > 90))
            return null;
        var x = 6378137.0 * wgsLon * 0.017453292519943295;
        var a = wgsLat * 0.017453292519943295;
        var y = 3189068.5 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
        return {'lat' : y, 'lon' : x};
        //*/
    },
    // Web mercator to WGS-84
    // mercatorLat -> y mercatorLon -> x
    mercator_decrypt : function(mercatorLat, mercatorLon) {
        var x = mercatorLon / 20037508.34 * 180.;
        var y = mercatorLat / 20037508.34 * 180.;
        y = 180 / this.PI * (2 * Math.atan(Math.exp(y * this.PI / 180.)) - this.PI / 2);
        return {'lat' : y, 'lon' : x};
        /*
        if (Math.abs(mercatorLon) < 180 && Math.abs(mercatorLat) < 90)
            return null;
        if ((Math.abs(mercatorLon) > 20037508.3427892) || (Math.abs(mercatorLat) > 20037508.3427892))
            return null;
        var a = mercatorLon / 6378137.0 * 57.295779513082323;
        var x = a - (Math.floor(((a + 180.0) / 360.0)) * 360.0);
        var y = (1.5707963267948966 - (2.0 * Math.atan(Math.exp((-1.0 * mercatorLat) / 6378137.0)))) * 57.295779513082323;
        return {'lat' : y, 'lon' : x};
        //*/
    },
    // two point's distance
    distance : function (latA, lonA, latB, lonB) {
        var earthR = 6371000.;
        var x = Math.cos(latA * this.PI / 180.) * Math.cos(latB * this.PI / 180.) * Math.cos((lonA - lonB) * this.PI / 180);
        var y = Math.sin(latA * this.PI / 180.) * Math.sin(latB * this.PI / 180.);
        var s = x + y;
        if (s > 1) s = 1;
        if (s < -1) s = -1;
        var alpha = Math.acos(s);
        var distance = alpha * earthR;
        return distance;
    },
    outOfChina : function (lat, lon) {
        if (lon < 72.004 || lon > 137.8347)
            return true;
        if (lat < 0.8293 || lat > 55.8271)
            return true;
        return false;
    },
    transformLat : function (x, y) {
        var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
        ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;
        ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;
        return ret;
    },
    transformLon : function (x, y) {
        var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
        ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;
        ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;
        return ret;
    }
}