vue与原生对比

在map上的操作

vue版本

<template>
  <div>
    <div ref="pops" v-show="currentItem">
      <div>名称：{{ currentItem.name}}</div>
      <div>地址：{{ currentItem.addr }}</div>
      <div> <span @click="goHere">到这儿去</span>
      <span @click="fromHere">从这儿出发</span>
      </div>
    </div>
  </div>
</template>
export default ({
  data() {
    return {
      currentItem: {}
    }
  },
  methods: {
    goHere() {
      this.$router.push({ name: 'transferQ', params: { end: this.currentItem.name } });
    },
    fromHere() {
      this.$router.push({ name: 'transferQ', params: { start: this.currentItem.name } });
    },
  }
})
var popup = new minemap.Popup({ closeOnClick: false, closeButton: true, offset: [-15, -30] })
      .setDOMContent(that.$refs.pops)//注意这里

原生

//方式一
      var eld = document.createElement('div');
      eld.className = 'custom-popup-class'; //custom-popup-class为自定义的css类名
      var r1 = document.createElement('div');
      r1.innerHTML = '名称：' + item.name;
      var r2 = document.createElement('div');
      r2.innerHTML = '地址：' + item.addr;
      var r3 = document.createElement('div');
      var span1 = document.createElement('span');
      span1.className = 'btn-font'; 
      var span2 = document.createElement('span');
      span2.className = 'btn-font'; 
      span1.innerHTML = '到这儿去';
      span2.innerHTML = '  从这儿出发';
      span2.addEventListener("click", function (et) {
        that.$router.push({ name: 'transferQ', params: { start: item.name } });
      })
      span1.addEventListener("click", function (et) {
        that.$router.push({ name: 'transferQ', params: { end: item.name } });
      })
      r3.appendChild(span1)
      r3.appendChild(span2)
      eld.appendChild(r1);
      eld.appendChild(r2);
      eld.appendChild(r3);
      var popup = new minemap.Popup({ closeOnClick: false, closeButton: true, offset: [-15, -30] })
      .setDOMContent(eld)