# wyt_map_gd

> 基于高德JS API的Vue3地图组件

Latest version **1.2.0** (published 2023-07-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install wyt_map_gd
pnpm add wyt_map_gd
yarn add wyt_map_gd
bun add wyt_map_gd
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2023-07-19 |
| First published | 2023-07-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 21.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | startcaft |
| Maintainers | startcaft |

## Links

- npm: https://www.npmjs.com/package/wyt_map_gd
- npm.io page: https://npm.io/package/wyt_map_gd

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.3.4
- [@amap/amap-jsapi-loader](https://npm.io/package/@amap/amap-jsapi-loader.md) ^1.0.1

## Recent versions

- 1.2.0 (latest) — 2023-07-19
- 1.1.0 — 2023-07-19
- 1.0.0 — 2023-07-18

## README

# 如何使用

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>

    ```

---
_Source: https://npm.io/package/wyt_map_gd · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._