gy-map

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

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

文档地址：https://guoyao132.github.io/npm-main/#/gy-map/GyMap/Install

安装

使用 npm 安装。

npm install gy-map --save

引入

全局引入 在main.js中引入

import {gyMap} from 'gy-Map';
import 'gy-map/style.css'
app.use(gyMap);

按需引入，在相应的页面中引入

import {Gymap, GymapHtml} from 'gy-Map'
<Gymap
  :mapOpt="mapOpt"
  :zoom="zoom"
  :center="p"
>
  <Gymap-html
    :position="p"
    :offset="o"
  ></Gymap-html>
</Gymap>

判断map加载完成

在其他页面中判断map是否加载完成

import {watch} from "vue"

const gyMapObj = gyMap(mapId); //mapId可不填， 当有多个地图是可以通过传入对应的ID，获取对应地图的实例。
const mapFinish = computed(() => gyMapObj.value && gyMapObj.value.mapFinish);
watch(mapFinish, n => {
  //n === true
  //map filish
})

GyMap

主容器

<template>
  <div class="gy-map-con">
    <Gymap
      id="map2"
      :mapOpt="mapOpt"
      :zoom="zoom"
      :center="center"
      :layerOpacity="layerOpacity"
      >
    </Gymap>
  </div>
</template>

<script setup lang="ts">
  import {ref, reactive} from "vue"
  const mapOpt = reactive({})
  let center = ref([116.40531, 39.896884]);
  const zoom = ref(16);
  const layerOpacity = ref(1);
</script>

其他组件

• GymapText 绘制文本
• GymapCircle 绘制一个圆
• GymapImage 绘制图片
• DemoGymapHtml 将HTML绘制到地图中
• GymapPolygon 多边形
• GymapLine 绘制一条线
• GymapHeat 热力图
• GymapDraw Draw绘画
• GymapTask 动画任务