gy-sjmap

使用vue3.0+vite+ts封装的地图组件

该组件支持VUE2.0以及VUE3.0。

安装

使用 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 动画任务