vue-map

安装

npm i @yexiaodong/vue-map

全局导入

import vueMap from "./ui";
app.use(vueMap);

使用

<vue-map
  ref="map"
  :iconObj="getPoint"
  :popup="popup"
  @select="onSelect"
></vue-map>

<script>
  import { defineComponent } from "vue";
  export default defineComponent({
    methods:{
        //获取点的图片与颜色
        getPoint(type) {
            return {
                src: Icon0,
                color: '#ff4d4f'
            }
        },
        //弹窗内容
        popup(property) {
            let hdms = "设备名称：" + property.name
            hdms = hdms + "<br/>"
            hdms = hdms + "设备类型：" + property.mapChannelTypeText;
            hdms = hdms + "<br/>"
            // hdms = hdms + "设备状态：" + property.isOnlineText;
            // hdms = hdms + "<br/>"
            // hdms = hdms + "地址：" + property.channelSituation;
            return hdms
        },
        //选择
        onSelect(property){
            console.log('选择',property)
        }
    }
    mounted() {
      let obj = {
        mapUrl: "地图地址",
        coverageName: "地图名称",
        mapBounds: "地图边界",
      };
      let list = [
        {
          mapX: "坐标",
          mapY: "坐标",
          radian: "旋转弧度",
        },
      ];
      this.$refs.map.initMap(obj, list);
    },
  });
</script>