busroute/src/components/map.vue

<template>
  <div class="mapContainer">
    <el-amap
      :center="center"
      :zoom="zoom"
      map-style="amap://styles/grey"
      @init="_init"
    />
  </div>
</template>

<script setup lang='ts'>
import { ElAmap } from '@vuemap/vue-amap'
import { ref } from 'vue'
withDefaults(defineProps<{
        zoom?: number
    }>(), {
  zoom: 12
})

const center = ref([ 103.044313, 30.011438 ])
let map = null
function _init(e: any) {
  const marker = new AMap.Marker({
    position: center
  })
  e.add(marker)
  map = e
  console.log('map init: ', e)
}
</script>

<style lang="scss" scoped>
.mapContainer {
  width: 100%;
  height: 100%;
  mask-image: radial-gradient(circle at center, #030E25 70%, transparent 76%);
}
</style>