美文网首页
百度地图

百度地图

作者: Clover园 | 来源:发表于2023-04-17 16:15 被阅读0次

1.信息窗口插入组件

InfoWindow为引入的组件
//编写函数
setInfoWindow(point) {
      const refbd = this.$refs.bdMap//地图实例
      const option = {
        width: 320, // 信息窗口宽度
        height: 120 // 信息窗口高度
      }
     const MyComponent = Vue.extend({
        render: h => h(InfoWindow, {
          props: {
            info: this.info,
            isType: 'baidu'
          }, // 组件传值
          on: {
            handleShowImageList: (point) => {
              this.handleShowImageList(point)// 组件事件
            }
          }
        })
      })
      const component = new MyComponent().$mount()
      const infoWindow = new refbd.BMapGL.InfoWindow(component.$mount().$el, option)
      refbd.bdmap.openInfoWindow(infoWindow, point)
    },
//调用
addDir(){
// 添加窗口
      const zbpoint = new refbd.BMapGL.Point(point.lng, point.lat)
      this.setInfoWindow(zbpoint)
}

//子组件 InfoWindow里面
 handleShowImageList() {
      this.$emit('handleShowImageList', this.info)
    },

相关文章

网友评论

      本文标题:百度地图

      本文链接:https://www.haomeiwen.com/subject/zfrcjdtx.html