<template>
  <div style="width: 100%; height: 400px">
    <AMapComponent>
      <el-amap-label-marker
        v-for="i in point"
        :key="i"
        :position="i.geometry.coordinates"
        :text="{
          content: i.properties.deviceName,
          direction: 'right',
          style: {
            fontSize: 15,
            fillColor: '#fff',
            strokeColor: 'rgba(255,0,0,0.5)',
            strokeWidth: 2,
            padding: [3, 10],
            backgroundColor: 'yellow',
            borderColor: '#ccc',
            borderWidth: 3
          }
        }"
        :icon="{
          image: 'https://a.amap.com/jsapi_demos/static/images/poi-marker.png',
          anchor: 'bottom-center',
          size: [25, 34],
          clipOrigin: [459, 92],
          clipSize: [50, 68]
        }"
        >123</el-amap-label-marker
      >
    </AMapComponent>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { AMapComponent } from '@jdlinker/ui';
  import { getGo } from '../../../../api/device/dashboard';
  let point = ref();
  const getMapData = async () => {
    const res = await getGo({});
    point.value = res.result?.features;
  };
  getMapData();
</script>
<style scoped></style>
