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>