VUE 高德地圖選取地址組件開發

高德地圖文檔地址
http://lbs.amap.com/api/lightmap/guide/picker/

結合步驟：

1.通過iframe內嵌引入高德地圖組件

key就選你自己申請的key

<template>
  <div>
    <div id="iframe">
      <iframe class="map-item" v-if="ismap" id="getAddress" @load="loadiframe"
              src="https://m.amap.com/picker/?key=xxxxxxxxxxx"
              style="width:100%; height:100%;position: absolute;z-index:22222;"></iframe>
    </div>
  </div>
</template>

2.監聽高德組件load事件

當然在vue里面可以使用 @load="loadiframe" 進行監聽
ps:onload :事件，就是選取地址之后，觸發的一個事件。比如點擊咖啡陪你，就會觸發onload事件。

3.實現監聽代碼:

ps：高德地圖通過 iframe 的 postmessage 向父組件傳值，我們進行接收就可以。更詳細的內容產考
https://segmentfault.com/a/1190000004512967

loadiframe() {
        let iframe = document.getElementById('getAddress').contentWindow;
        iframe.postMessage('hello', 'https://m.amap.com/picker/');
        window.addEventListener("message", function (e) {
          if (e.data.command != "COMMAND_GET_TITLE") {
               / /實現業務代碼
          }

        }.bind(this), false);
      },

3.完整高德地圖組件代碼

<template>
  <div>
    <div id="iframe">
      <iframe class="map-item" v-if="ismap" id="getAddress" @load="loadiframe"
              src="https://m.amap.com/picker/?key=xxxxxxxxxxxxx"
              style="width:100%; height:100%;position: absolute;z-index:22222;"></iframe>
    </div>
  </div>
</template>

<script>
  export default {
    props: ["ismap"],
    data() {
      return {
        locationData: {}
      }
    },
    created() {

    },
    methods: {
      loadiframe() {
        let iframe = document.getElementById('getAddress').contentWindow;
        iframe.postMessage('hello', 'https://m.amap.com/picker/');
        window.addEventListener("message", function (e) {
          if (e.data.command != "COMMAND_GET_TITLE") {
            //業務代碼
            console.log(e):     
          }

        }.bind(this), false);
      },

    }
  }
</script>
<style>
  .map-item {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: #fff;
    z-index: 222;
  }
</style>