minnan-collect-web/src/components/content/SimplePointedMap.vue

<template>
  <div :style="{ width, height }">
    <el-amap
      style="width: 100%"
      :center="center"
      :zoom="zoom"
      @init="handleInit"
      v-bind="$attrs"
    >
      <el-amap-marker :position="center" />
    </el-amap>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';

const props = defineProps({
  latitude: {
    type: [Number, String],
    default: 0
  },
  longitude: {
    type: [Number, String],
    default: 0
  },
  width: {
    type: [Number, String],
    default: '100%'
  },
  height: {
    type: [Number, String],
    default: '300px'
  }
});

const zoom = ref(12);
const center = ref([121.59996, 31.197646]);
let map: any = null;

function handleInit(mapRef: any) {
  map = mapRef;
}
function loadMaker() {
  if (!map || !props.longitude || !props.latitude) 
    return;
  center.value = [Number(props.longitude), Number(props.latitude)];
}

watch(() => [props.latitude, props.longitude], () => {
  loadMaker();
});
onMounted(() => {
  loadMaker();
});
</script>