@dead-pool/vue3-draw-map v0.0.8

绘制地图区域组件

使用

腾讯地图的 SDK 通过 index.html 的 script 标签直接引入，需要手动添加到模板文件中。

<script src="...."></script>

属性

height

地图高度

类型 <string> ，默认值为 100%，需要携带单位。地图宽度为 100%。

coordinates

初始图形坐标数组

类型 { latitude: number; longitude: number;}[]，传递该值

方法

clear

清除画布重新绘制地图。

getCoordinates

返回绘制的图形坐标数组，类型为 [经度: number, 纬度: number][]

示例

<script setup lang="ts">
    import DrawMap, { DrawMapInstance } from '@dead-pool/vue3-draw-map';
    import { ref } from 'vue';
    const drawMapRef = ref<DrawMapInstance>();
    function clear() {
        drawMapRef.value?.clear();
    }
    function getData() {
        const data = drawMapRef.value?.getCoordinates;
        /* ... */
    }
</script>
<template>
    <button @click="clear">
        clear
    </button>
    <button @click="getData">
        getData
    </button>
    <DrawMap ref="drawMapRef" />
</template>

发布

首次发布时，修改 pakage.json 中的 name 和 version 字段，准备好 npm 账号和组织。

注意切换镜像源为 https://registry.npmjs.org/

发布前先进行打包 yarn build ，配置只发布 dist 文件夹与类型声明文件，配置字段为 package.json 的 files 字段。

推荐使用 scoped 方式发布，name 字段需加上组织前缀。

# pubic
npm publish

# scoped
npm publish --access=public