quasar-data-process/src/pages/manage/AdminPage.vue

<template>
  <q-page class="bg-grey-2">
    <div class="q-pa-lg">
      <div class="text-body1 text-bold">
        首页
      </div>
      <q-separator/>
<!--      {{ showWindowFlag }}-->
            <div class="row justify-around">
              <baidu-map class="bm-view"
                         ak="Beu0HwnbpN8k7DRtAjZs8MyMk4nqVZFr"
                         type="API"
                         :zoom="zoom"
                         :center="center"
                         @dblclick="dbShow"
                         @ready="whenReady"
                         ref="mapRef"
                         :scroll-wheel-zoom="true"
              >
                <bm-point-collection :points="points" color="red" size="BMAP_POINT_SIZE_SMALL" @click="clickHandler"></bm-point-collection>
                <bm-marker :position="marked" @dblclick="showWindow" ></bm-marker>
                <bm-info-window :position="position" :show="showWindowFlag" @close="close">
                  <div class="row">
                    <div class="col-12 text-body2">地址：{{lat}},{{lng}}</div>
                    <div class="col-auto text-body2">距离：</div>
                    <div class="col-12">
                      <q-btn color="primary" label="导航到此处" flat size="sm" align="left"/>
                    </div>
                  </div>
                </bm-info-window>
                <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
                <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_LEFT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
                <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
              </baidu-map>
            </div>
    </div>
    <div class="row justify-center">
<!--      <div class="my-animation"></div>-->
<!--      <div class="my-animation2"></div>-->
<!--      <q-btn/>-->
    </div>

  </q-page>
</template>

<script setup>
import {BaiduMap, BmScale, BmNavigation, BmGeolocation, BmCityList, BmControl} from 'vue-baidu-map-3x';
import {useGeocoder, usePoint, BmMarker, BmLabel, BmInfoWindow, BmPointCollection} from 'vue-baidu-map-3x';
import {ref} from 'vue';

const center = ref({lng: 116.404, lat: 39.915})
const zoom = ref(15)
const showLatLng = ref(false);
const points = ref([]);
const lat = ref(null)
const lng = ref(null)
const BmapIn = ref(null)
const mapIn = ref(null)
const mapRef = ref(null)
const marked = ref({lng: 0, lat: 0})
const position = ref({lng: 0, lat: 0})
const showWindowFlag = ref(false)


function showWindow(event) {
  // 获取鼠标双击位置的像素坐标
  const point = event.pixel;
  lat.value = event.point.lat;
  lng.value = event.point.lng;
  // 将像素坐标转换为地理坐标（经纬度）
  showWindowFlag.value = true
}

function close() {
  showWindowFlag.value = false
}

const clickHandler = (event) => {
// 获取鼠标双击位置的像素坐标
  lat.value = event.point.lat;
  lng.value = event.point.lng;
  position.value.lat = lat.value;
  position.value.lng = lng.value;

  // 将像素坐标转换为地理坐标（经纬度）
  showWindowFlag.value = true
};

function whenReady({BMap, map}) {
// 将地图中心设置为昆明市政府的经纬度
  center.value = {lng: 102.712251, lat: 25.040609};
  // 获取地图实例
  mapIn.value = map;
  BmapIn.value = BMap;

  console.log("Bmap:");
  console.log(BMap);
  console.log("map:"+map);
  console.log(map);


  const pointAll = [];
  for (var i = 0; i < 30; i++) {
    const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21};
    pointAll.push(position);
  }
  points.value = pointAll;

  const sw = new BMap.Point(97.517378, 21.143333); // 西南角（云南的西南角经纬度）
  const ne = new BMap.Point(106.117187, 29.25284); // 东北角（云南的东北角经纬度）
  const bounds = new BMap.Bounds(sw, ne);
  const geo = new BMap.Geolocation();
  console.log(geo)

  useGeocoder().then((geocoder) => {
    geocoder.getPoint('昆明市盘龙区低碳中心', (res) => {
      marked.value.lat = res.lat
      marked.value.lng = res.lng
    })
  })

  if (navigator.geolocation) {
    console.log(navigator.geolocation)
    geo.enableSDKLocation();
    geo.getCurrentPosition(function (r) {
      if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        alert('您的位置：' + r.point.lng + ',' + r.point.lat);
      } else {
        alert('failed' + this.getStatus());
        console.log(this.getStatus())
      }
    })
  } else {
    alert('浏览器不支持定位')
  }

}

</script>

<style scoped>
.bm-view {
  width: 100%;
  height: 400px;
}

@keyframes my-animation {
  0%   {background: red; left:0px; top:0px;}
  25%  {background: yellow; left:200px; top:0px;}
  50%  {background: blue; left:200px; top:200px;}
  75%  {background: green; left:0px; top:200px;}
  100% {background: red; left:0px; top:0px;}
}

@keyframes my-animation2 {
0% {
  transform: rotate(0deg);
  left: 500px;
}
25% {
  transform: rotate(20deg);
  left: 500px;
}

50% {
  transform: rotate(0deg);
  left: 900px;
}
55% {
  transform: rotate(0deg);
  left: 900px;
}
70% {
  transform: rotate(0deg);
  left: 900px;
  background: #1ec7e6;
}
100% {
  transform: rotate(-360deg);
  left: 500px;
}
}

.my-animation {
  left: 0;
  position: absolute;
  border: 5px black;
  width: 200px;
  height: 200px;
  border-radius: 15px;
  animation: my-animation 4s infinite;
  background-color: #F22722;
}

.my-animation2 {
  position: absolute;
  left: 500px;
  border: 5px black;
  width: 200px;
  height: 120px;
  border-radius: 15px;
  animation: my-animation2 4s infinite;
  background-color: #F22722;
}

.my-button {
  color: white;
  border-radius: 15px;
  background-color: #E76F51;
  border: none;
  padding: 12px 25px;
  overflow: hidden;
  cursor: pointer;
}

.my-button:hover {
  transition: background-color ease-out 400ms;
  background-color: pink;
}

</style>