ocr-web/src/views/map/index.vue

<script>
import { reactive, toRefs, onMounted } from "vue";
export default {
  setup() {
    let state = reactive({});

    let methods = {
      init() {
        function getQueryParamsNew() {
          const params = new URLSearchParams(window.location.search);
          let paramsObj = {};
          for (const [key, value] of params.entries()) {
            if (paramsObj.hasOwnProperty(key)) {
              if (Array.isArray(paramsObj[key])) {
                paramsObj[key].push(value);
              } else {
                paramsObj[key] = [paramsObj[key], value];
              }
            } else {
              paramsObj[key] = value;
            }
          }
          return paramsObj;
        }
        var queryParamsNew = getQueryParamsNew();
        state.queryParamsNew = queryParamsNew;

        const lng = queryParamsNew.lng; //经度
        const lat = queryParamsNew.lat; // 纬度
        // 初始化地图
        const center = new qq.maps.LatLng(lat, lng);
        const map = new qq.maps.Map(document.getElementById("map-container"), {
          center,
          zoom: 15,
        });

        // 创建坐标点
        const marker = new qq.maps.Marker({
          position: center,
          map: map,
        });
        // 创建信息窗口
        const infoWin = new qq.maps.InfoWindow({
          map: map,
          position: center,
        });
        infoWin.setContent(
          `<div class="detailshow" >${queryParamsNew.name}</div>`
        );
        infoWin.open();
        qq.maps.event.addListener(marker, "click", function () {
          infoWin.open();
          infoWin.setContent(
            `<div class="detailshow" >${queryParamsNew.name}</div>`
          );
          infoWin.setPosition(centerLatLng);
        });
      },
    };
    onMounted(() => {
      methods.init();
    });
    return {
      ...toRefs(state),
      ...methods,
    };
  },
  components: {},
};
</script>
<template>
  <div class="mapmain">
    <div id="map-container" style="width: 100%; height: 100%"></div>
  </div>
</template>

<style >
.layout-sider {
  display: none;
}
.layout-main-header {
  display: none;
}
.mapmain {
  height: 100%;
  width: 100%;
}
.detailshow {
  width: 100%;
}
</style>