1.2.0 • Published 10 months ago

wyt_map_gd v1.2.0

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

如何使用

  1. 安装依赖 yarn add wyt_map_gd
  2. vue组件中引入 import GdMap from 'wyt_map_gd'
  3. 注意加入样式文件 import wyt_map_gd/dist/style.css
  4. 组件需要一个gdMapOptions的props:
    const options = {
        key: '',        // 你申请的高德key
        center: {
            lng: '',    // 地图初始中心点lng
            lat: ''     // 地图初始中心点lat
        }
    }
  5. 组件对外暴露clickMap事件,返回单击地图时的坐标点和转码地址,返回的数据格式如下:
    export interface MapClickResult {
        lng: number;
        lat: number;
        address: string
    }
  6. 初始地图时如果不能高度自适应,则可以手动派发以下resize事件:
    onMounted(() => {
        window.dispatchEvent(new Event('resize'));
    })
  7. 完整示例:

    <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>
1.2.0

10 months ago

1.1.0

10 months ago

1.0.0

10 months ago