高德地图弹框引用VUE组件

1.高德地图版本：2.0

2.实现效果：

 3.代码如下（地图页面代码）

var infoWindow = new SimpleInfoWindow({
            //基点指向marker的头部位置
            offset: new AMap.Pixel(0, -10)
          });
          params.infoWindow = infoWindow;
          pointSimplifierIns.on('pointClick', function(e, record) {
            let siteinfo = record.data;
            var sitename = siteinfo.sitename
            let Content = Vue.extend({//自定义模板继承
              template: `<base-info :sitename="sitename" :siteinfo="siteinfo" :infoWindow="infoWindow" :startAlarmTime="startAlarmTime" :endAlarmTime="endAlarmTime"></base-info>`,
              // name: 'child',
              components: {
                'base-info': mapInfoWindowComponent //弹框用子组件包裹
              },
              data(){
                return {
                  sitename:sitename,
                  infoWindow:params.infoWindow,
                  siteinfo:siteinfo,
                  startAlarmTime: that.startAlarmTime,
                  endAlarmTime: that.endAlarmTime
                }
              }
            });
            let component = new Content().$mount();
            params.infoWindow.setContent(component.$el);
            params.infoWindow.open(params.map, [siteinfo.longitudinal, siteinfo.dimension]);
          });

4.将你的弹框做成一个公共组件引入（下面代码是上面中截取的实现代码）

let Content = Vue.extend({//自定义模板继承
              template: `<base-info :sitename="sitename" :siteinfo="siteinfo" :infoWindow="infoWindow" :startAlarmTime="startAlarmTime" :endAlarmTime="endAlarmTime"></base-info>`,
              // name: 'child',
              components: {
                'base-info': mapInfoWindowComponent //弹框用子组件包裹
              },
              data(){
                return {
                  sitename:sitename,
                  infoWindow:params.infoWindow,
                  siteinfo:siteinfo,
                  startAlarmTime: that.startAlarmTime,
                  endAlarmTime: that.endAlarmTime
                }
              }
            });
            let component = new Content().$mount();
            params.infoWindow.setContent(component.$el);
            params.infoWindow.open(params.map, [siteinfo.longitudinal, siteinfo.dimension]);

5.关于监听弹框中的点击事件，这里使用的技术使VUE中非父子组件传值+监听的中转站具体实现如下：用VUE建立一个事件(以下代码是弹框内的，结合上面的实现效果图)

 <el-button id="myMapInfoWindowComponent" size="mini" style="float: right;margin-right: 4px" @click="openSiteInfoDrawer(siteinfo.siteid)">详情</el-button>

openSiteInfoDrawer(siteid,sitename){
      Vue.prototype.chargespot.Bus.$emit('openmapdrawer',siteid)
    },

6.中转站Bus是在main.js建立的

/* eslint-disable no-new */
Vue.prototype.chargespot = new Vue({
  el: '#app',
  data: {
    Bus: new Vue()//非父子组件传值的中转站
  },
  router,
  store,
  template: '<App/>',
  components: { App }
})

7.地图页面监听按钮的代码如下：

created () {
    Vue.prototype.chargespot.Bus.$on('openmapdrawer', siteid => {
      //你需要执行的方法事件等。。。
    })
  },

8.总结：

1.就是地图引入弹框组件的方法

2.监听弹框内的特定按钮的点击事件$on和$emit的使用