高德地图嵌入Vue并实现通信交互的方法

15195775117

现在很多网站都需要使用高德地图，这里存在2个槛：


1、如何嵌入高德地图？

开发高德地图不能用webpack，而是原生开发，这导致我们必须以iframe的形式使用高德地图。
直接用iframe标签嵌入自己写的高德地图会失败，因为这里有一个叫"clickjacking"的安全机制，它阻止了自己的网页被其他网页嵌入，
我们需要在后端设置X_FRAME_OPTIONS，允许前端嵌入才行。

2、Vue页面与iframe通信问题

第1步，在vue中写一个iframe标签：
<iframe ref="iframe0"></iframe>

第2步，Vue新建一个对象，注意，这里的iframe0对应标签中的ref值
this.iframeWin = this.$refs.iframe0.contentWindow


第3步，准备一个函数，用以向iframe0发送信息：
sendMessage () {
      let x={cmd: 'success',test: '来自父页面的问候'}
      this.iframeWin.postMessage(x,'*')
    }

第3步，在高德地图的网页中，准备一个函数接收这个信息：
function handleMessage (event) {
      const data = event.data
      if (data.cmd==="success"){
        window.parent.postMessage({code:"success",test:"成功收到指示"}, '*');
      }
    }
window.addEventListener('message',handleMessage)//绑定函数

第4步，从高德地图的网页向父页面传信息：
let x={code: "success",test: "来自iframe的问候!"}
window.parent.postMessage({data:x}, '*');

第5步，在vue中写一个函数，接收高德地图发送的信息：
    handleMessage (event) {
      const data = event.data // iframe传来的数据
      // 处理之：
      if (data.code==="success"){
        alert(data.test)
      }
    }
window.addEventListener('message', this.handleMessage)//绑定函数


至此，就实现了高德地图的嵌入和交互。很银性，很好用！