vue-baidu-map插件中bm-marker组件嵌套bm-info-window组件

Vue-BaiduMap是一款方便开发者在Vue应用中集成百度地图的插件。其中，`bm-marker`组件用于创建地图上的标记点，而`bm-info-window`组件则是用来显示当鼠标悬停在标记点上时弹出的信息窗口。

在Vue-BaiduMap中，你可以将`bm-marker`组件作为父元素，并在其`props`中包含一个`event`属性，这个属性通常是一个自定义事件，比如`click`。然后，在`methods`中监听这个事件，触发后创建一个新的`bm-info-window`实例，并将其绑定到对应的marker上。

例如：

<template>
  <div id="app">
    <baidu-map :center="mapCenter" :zoom="zoomLevel">
      <bm-marker v-for="(marker, index) in markers" :key="index" @click="showInfoWindow(index)">
        <bm-custom-view :position="marker.position"></bm-custom-view>
        <bm-info-window ref="infoWindows[index]">{{ marker.info }}</bm-info-window>
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mapCenter: { lat: 39.9042, lng: 116.4074 },
      zoomLevel: 15,
      markers: [
        // ... 这里是一些marker对象，每个对象都有position和info属性
      ]
    };
  },
  methods: {
    showInfoWindow(markerIndex) {
      this.$refs['infoWindows'][markerIndex].open(this.markers[markerIndex].position);
    }
  }
};
</script>

当你点击某个标记时，它会触发`showInfoWindow`方法，展示对应位置的`bm-info-window`内容。这样就实现了`bm-marker`和`bm-info-window`的嵌套交互。