wyt_map_gd
v1.2.0
Published
基于高德JS API的Vue3地图组件
Downloads
4
Readme
如何使用
- 安装依赖
yarn add wyt_map_gd
- vue组件中引入
import GdMap from 'wyt_map_gd'
- 注意加入样式文件
import wyt_map_gd/dist/style.css
- 组件需要一个gdMapOptions的props:
const options = { key: '', // 你申请的高德key center: { lng: '', // 地图初始中心点lng lat: '' // 地图初始中心点lat } }
- 组件对外暴露clickMap事件,返回单击地图时的坐标点和转码地址,返回的数据格式如下:
export interface MapClickResult { lng: number; lat: number; address: string }
- 初始地图时如果不能高度自适应,则可以手动派发以下resize事件:
onMounted(() => { window.dispatchEvent(new Event('resize')); })
- 完整示例:
<template> <div> <GdMap :gd-map-options="mapOptions" @click-map="handlMapClick" /> </div> </template> <script setup lang="ts"> import { onMounted } from 'vue'; import GdMap from 'wyt_map_gd'; import 'wyt_map_gd/dist/style.css'; const mapOptions = { key: '你申请的高德key', center: { lng: '116.399113', lat: '39.907795' } } function handlMapClick(e: Record<'ret',any>){ console.log(e.ret); } onMounted(() => { const resizeEvent = new Event('resize'); window.dispatchEvent(resizeEvent); }); </script>