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

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

結合步驟:vue

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

key就選你本身申請的keyjava

<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事件。segmentfault

3.實現監聽代碼:

ps:高德地圖經過 iframe 的 postmessage 向父組件傳值,咱們進行接收就能夠。更詳細的內容產考
https://segmentfault.com/a/1190000004512967api

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>
相關文章
相關標籤/搜索