# Gaode InfoWindow

**Repository Path**: tzdxf/gaode_infowindow_vue

## Basic Information

- **Project Name**: Gaode InfoWindow
- **Description**: 在Vue中使用高德地图的信息窗体，实现可控制的Vue信息窗体
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 3
- **Created**: 2023-03-03
- **Last Updated**: 2024-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 高德地图中使用 Vue 组件自定义 InfoWindow 信息窗口

### vue2

#### `InfoWindow.vue`信息窗口组件

```vue
<template>
  <div>
    <div>{{ num }} + {{ numB }} = {{ num + numB }}</div>
    <button @click="num++">+1</button>
  </div>
</template>

<script>
export default {
  name: "InfoWindow",
  props: {
    numB: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      num: 0,
    };
  },
};
</script>
```

#### `createInfoWindow.js` 创建窗体的方法

```js
// 此处注意引用文件
import Vue from "vue/dist/vue.esm.js";
import InfoWindow from "./InfoWindow.vue";

const createInfoWindow = (num) => {
  // 挂载vue元素
  const element = document.createElement("div");
  const app = new Vue({
    components: { InfoWindow },
    template: `<InfoWindow :numB="num"/>`,
    data() {
      return {
        num,
      };
    },
    methods: {
      add() {
        this.num++;
      },
    },
  });
  app.$mount(element);

  // 创建信息窗体
  const infoWindow = new AMap.InfoWindow({
    anchor: "bottom-center",
    content: this.element,
  });
  return { infoWindow, app };
};

export default createInfoWindow;
```

#### `MapTool.vue` 创建信息窗体

创建信息窗体，实现外部调用信息窗体内 vue

```vue
<template>
  <div>
    <button @click="createInfoWindow">创建信息窗体</button>
    <button @clikc="add">+1</button>
  </div>
</template>

<script>
import createInfoWindow from "./createInfoWindow.js";

export default {
  data() {
    return {
      infoWindow: null,
      app: null,
    };
  },
  methods: {
    createInfoWindow() {
      const { infoWindow, app } = createInfoWindow(2);
      this.infoWindow = infoWindow;
      this.app = app;

      // 在地图中心创建信息窗体
      this.infoWindow.open(map, map.getCenter());
    },

    add() {
      this.app && this.app.add();
    },
  },
};
</script>
```

### vue3

vue3 的方法与 vue2 大致相同，vue3 不能方便的通过 app 实例调用内部方法，建议使用`pinia`与内部通信。

vue3 创建的实例可以在调试工具中查看。vue2 不可以。

```js
class GInfoWindow3 extends BaseGInfoWindow {
  constructor(component) {
    super(component);
  }

  createApp(conf) {
    super.createApp();
    let app = Vue.createApp({
      components: { comp: this.component },
      template: `
              <comp/>`,
      ...conf,
    });
    // 使用pinia
    app.use(createPinia());
    app.mount(this.element);
    this.app = app;
  }
}
```







## 演示示例

[Gaode InfoWindow: 在Vue使用高德地图的信息窗体，实现可控制的Vue信息窗体 (gitee.com)](https://gitee.com/tzdxf/gaode_infowindow_vue)

> 需要在`main.js`中配置相关信息