# vue3-2212a-shop6

**Repository Path**: ywbingchuan/vue3-2212a-shop6

## Basic Information

- **Project Name**: vue3-2212a-shop6
- **Description**: vue3-2212a-shop6
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-22
- **Last Updated**: 2025-07-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-demo02

This template should help get you started developing with Vue 3 in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.

## Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Type-Check, Compile and Minify for Production

```sh
npm run build
```

# 高德地图接口

## 高德的图接口地址

```bash
https://lbs.amap.com/demo/javascript-api-v2/example/event/map-click-event
```

## 1、Vue3集成高德地图

在index.html文件中在head标签中添加如下代码：

```html
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=7fac11790025fa9da05e739566ca7af8"></script>
```

## 2、模板中定义地图区域

```html
        <div style="width: 500px; height: 400px;">
            <div id="container" style="width: 100%;height: 100%;"></div>
            <div id="text">
                {{msg}}
            </div>
        </div>
```

## 3、Vue的页面加载钩子函数中初始化高德地图

```ts
    //初始化地图对象，加载地图
    map.value = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 11,
        center: [116.650687,35.012617],
    });

    // 绑定点击事件
    map.value.on('click', showInfoClick);
```

## 4、地图点击事件以及显示覆盖物

```ts
function showInfoClick(e){
    let text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置单击了地图！';
    console.log(text);

    // 清除地图上所有添加的覆盖物
    map.value.clearMap();

    // 创建点覆盖物
    let marker = new AMap.Marker({
        position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
        offset: new AMap.Pixel(-14, -28)
    });
    map.value.add(marker);
}
```