1.0.11 • Published 7 months ago
gy-sjmap v1.0.11
gy-sjmap
使用vue3.0+vite+ts封装的地图组件
该组件支持VUE2.0以及VUE3.0。
文档地址:https://guoyao132.github.io/npm-main/#/gy-sjmap/GySjmap/Install
安装
使用 npm 安装。
npm install gy-sjmap --save
引入
全局引入 在main.js中引入
import {gySjmap} from 'gy-sjmap';
import 'gy-sjmap/style.css'
app.use(gySjmap);
按需引入,在相应的页面中引入
import {GySjmap, GySjmapHtml} from 'gy-sjmap'
<GySjmap
:mapOpt="mapOpt"
:zoom="zoom"
:center="p"
>
<GySjmapHtml
:position="p"
></GySjmapHtml>
</GySjmap>
判断map加载完成
在其他页面中判断map是否加载完成
import {gySjMap} from "gy-sjmap";
import type {gySjmapType} from 'gy-sjmap'
import {watch} from "vue"
const gySjmapObj:Ref<UnwrapRef<gySjmapType>> | null = gySjMap(mapId); //mapId可不填, 当有多个地图是可以通过传入对应的ID,获取对应地图的实例。
const mapFinish:Ref<boolean> = computed(() => gySjmapObj.value && gySjmapObj.value.mapFinish);
watch(mapFinish, n => {
//n === true
//map filish
})
获取当前地图map实例
import {gySjMap} from "gy-sjmap";
import type {gySjmapType} from 'gy-sjmap'
import {watch} from "vue"
const gySjmapObj:Ref<UnwrapRef<gySjmapType>> | null = gySjMap(mapId); //mapId可不填, 当有多个地图是可以通过传入对应的ID,获取对应地图的实例。
const mapFinish:Ref<boolean> = computed(() => gySjmapObj.value && gySjmapObj.value.mapFinish);
watch(mapFinish, n => {
//n === true
//map filish
const mapObj = gySjmapObj.value.map;
})
//或者使用computed获取
const mapObj = computed(() => gySjmapObj.value && gySjmapObj.value.map);
给当前地图map绑定交互事件以及方法
import {gySjMap} from "gy-sjmap";
import type {gySjmapType} from 'gy-sjmap'
import {watch, onBeforeUnmount} from "vue"
const gySjmapObj:Ref<UnwrapRef<gySjmapType>> | null = gySjMap(mapId); //mapId可不填, 当有多个地图是可以通过传入对应的ID,获取对应地图的实例。
const mapFinish:Ref<boolean> = computed(() => gySjmapObj.value && gySjmapObj.value.mapFinish);
const mapObj = null;
watch(mapFinish, n => {
//n === true
//map filish
mapObj = gySjmapObj.value.map;
//添加click事件
mapObj.on('click', clickFun)
})
const clickFun = (e) => {
}
onBeforeUnmount(() => {
//接触绑定click事件
mapObj && mapObj.off('click', clickFun)
})
GySjmap
主容器
<template>
<div class="gy-map-con">
<GySjmap
id="map"
:zoom="zoom"
:center="center"
>
<slot></slot>
</GySjmap>
</div>
</template>
<script setup lang="ts">
import {ref, reactive} from 'vue'
let center = ref([116.40803281576643,39.893935171491535]);
const zoom = ref(14);
</script>
其他组件
- GySjmapText 绘制文本
- GySjmapCircle 绘制一个圆
- GySjmapImage 绘制图片
- GySjmapHtml 将HTML绘制到地图中
- GySjmapPolygon 多边形
- GySjmapLine 绘制一条线
- GySjmapHeat 热力图
- GySjmapLonlat 获取鼠标点击的经纬度
- GySjmapDraw Draw绘画
- GySjmapTask 动画任务
1.0.9
10 months ago
1.0.8
10 months ago
1.0.7
10 months ago
1.0.6
10 months ago
1.0.5
10 months ago
1.0.4
10 months ago
1.0.3
10 months ago
1.0.11
7 months ago
1.0.10
7 months ago
1.0.2
10 months ago
1.0.0
11 months ago
0.0.23
2 years ago
0.0.22
2 years ago
0.0.20
3 years ago
0.0.21
3 years ago
0.0.11
3 years ago
0.0.12
3 years ago
0.0.13
3 years ago
0.0.14
3 years ago
0.0.15
3 years ago
0.0.16
3 years ago
0.0.17
3 years ago
0.0.18
3 years ago
0.0.19
3 years ago
0.0.10
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago