<template>
<view>
<view class="page-section page-section-gap" v-show="show_map">
<view>lat: {{this.lat}}</view>
<view>lng: {{this.lng}}</view>
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom" class="buttom_popup">
<iframe :src=this.url id="mapPage" width="100%" height="500rpx" frameborder=0>
</iframe>
</uni-popup>
</view>
</view>
</template>
<script>
import uniPopup from '../../components/uni-popup/uni-popup.vue'
import uniPopupMessage from '../../components/uni-popup/uni-popup-message.vue'
import uniPopupDialog from '../../components/uni-popup/uni-popup-dialog.vue'
export default {
components: {
uniPopup,
uniPopupMessage,
uniPopupDialog
},
onLoad() {
var that = this
window.addEventListener('message', function(event) {
var loc = event.data;
if (loc && loc.module == 'locationPicker') {
that.changeLoc(loc);
}
}, false);
},
data() {
return {
lat:'32.64671',
lng:'117.01504',
show_map:true,
url: "https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=you_key&referer=myapp&coord=32.64671,117.01504"
}
},
methods: {
changeLoc:function(loc){
this.lat = loc.latlng.lat
this.lng = loc.latlng.lng
},
open(){
this.$refs.popup.open()
}
}
}
</script>
<style>
.page-section{
padding-top:0rpx;
}
.buttom_popup{
background: #007AFF;
}
</style>