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

<script>
import { onMounted, reactive, toRefs } from 'vue'

export default {
  components: {},
  setup() {
    const state = reactive({})

    const methods = {
      init() {
        function getQueryParamsNew() {
          const params = new URLSearchParams(window.location.search)
          const 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
        }
        const 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,
        })
        // 创建信息窗口
        const infoWin = new qq.maps.InfoWindow({
          map,
          position: center,
        })
        infoWin.setContent(
          `<div class="detailshow" >${queryParamsNew.name}</div>`,
        )
        infoWin.open()
        qq.maps.event.addListener(marker, 'click', () => {
          infoWin.open()
          infoWin.setContent(
            `<div class="detailshow" >${queryParamsNew.name}</div>`,
          )
          infoWin.setPosition(centerLatLng)
        })
      },
    }
    onMounted(() => {
      methods.init()
    })
    return {
      ...toRefs(state),
      ...methods,
    }
  },
}
</script>

<template>
  <div class="mapmain">
    <div id="map-container" style="width: 100%; height: 100%" />
  </div>
</template>

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