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

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

vue2

InfoWindow.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 创建窗体的方法

方便创建信息窗体的方法。

1. 创建一个新的div元素
2. 新建一个vue实例，引入信息窗体组件
3. 将vue实例挂载到div元素上
4. 创建信息窗体，使用创建的div元素
5. 返回 信息窗体，vue实例

// 此处注意引用文件
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: element,
  });
  return { infoWindow, app };
};

export default createInfoWindow;

MapTool.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与内部通信。

具体实现方式，看最后的demo地址。

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

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)

示例中有对创建信息窗体进行封装。

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