高德地圖文檔地址
http://lbs.amap.com/api/lightmap/guide/picker/javascript
結合步驟:vue
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>
固然在vue裏面能夠使用 @load="loadiframe" 進行監聽
ps:onload :事件,就是選取地址以後,觸發的一個事件。好比點擊咖啡陪你,就會觸發onload事件。segmentfault
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); },
<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>