RunForge-Frontend/src/components/Map/MapContainer.vue

<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue"
import AMapLoader from "@amap/amap-jsapi-loader"

let props = defineProps({
  pathData: {
    type: Array,
    default: () => ([])
  },
  point_list: {
    type: Array,
    default: () => ([])
  },
  threeD: {
    type: Boolean,
    default: false
  }
})

let map = null

onMounted(() => {
  AMapLoader.load({
    key: "d1f123693def8a412c976184daa4b60e",
    version: "2.0",
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
        viewMode: props.threeD ? '3D' : '2D', //地图模式
        rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
        pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
        zoom: 17.5, //初始化地图层级
        rotation: -15, //初始地图顺时针旋转的角度
        zooms: [3, 20], //地图显示的缩放级别范围
        center: props.pathData?.length > 0 ? props.pathData[0] : [106.5799475868821, 29.504864472181577],
      })

      // 添加折线
      if (props.pathData?.length > 0) {
        let polyline = new AMap.Polyline({
          path: props.pathData,
          strokeWeight: 2, //线条宽度
          strokeColor: "red", //线条颜色
          lineJoin: "round", //折线拐点连接处样式
        })
        map.add(polyline)

        const beginMarker = new AMap.Marker({
          position: props.pathData[0],
          offset: new AMap.Pixel(-24, -48),
          icon: "/mark/begin.png",
          title: "起始点"
        })
        const endMarker = new AMap.Marker({
          position: props.pathData[props.pathData.length - 1],
          offset: new AMap.Pixel(-24, -48),
          icon: "/mark/end.png",
          title: "终点"
        })
        map.add([beginMarker, endMarker])
      }

      // 添加打卡点
      if (props.point_list?.length > 0) {
        props.point_list.forEach((point, index) => {
          const marker = new AMap.Marker({
            position: [point.longtitude, point.latitude],
            offset: new AMap.Pixel(-24, -48),
            icon: "/mark/daka.png",
            title: `打卡点${index + 1}`
          })
          map.add(marker)
        })
      }

      AMap.plugin(['AMap.ControlBar', "AMap.ToolBar", "AMap.Scale"], function () {
        let controlBar = new AMap.ControlBar({ //控制地图旋转插件
          position: {
            right: '10px',
            top: '10px'
          }
        })
        map.addControl(controlBar)
        let toolbar = new AMap.ToolBar()
        map.addControl(toolbar)
        let scale = new AMap.Scale()
        map.addControl(scale)
      })


    })
    .catch((e) => {
      console.log(e)
    })

})

onUnmounted(() => {
  map?.destroy()
})
</script>

<style scoped>
#container {
  width: 100%;
  height: 550px
}

@media only screen and (max-width: 768px) {
  #container {
    height: 450px
  }
}
</style>