You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
1.9 KiB
92 lines
1.9 KiB
<template>
|
|
<div class="uni-system-choose-location">
|
|
<system-header
|
|
:confirm="!!data"
|
|
@back="_back"
|
|
@confirm="_choose"
|
|
>
|
|
选择位置
|
|
</system-header>
|
|
<div class="map-content">
|
|
<iframe
|
|
:src="src"
|
|
allow="geolocation"
|
|
seamless
|
|
sandbox="allow-scripts allow-same-origin allow-forms"
|
|
frameborder="0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import SystemHeader from '../system-header'
|
|
|
|
export default {
|
|
name: 'SystemChooseLocation',
|
|
components: {
|
|
SystemHeader
|
|
},
|
|
data () {
|
|
const key = __uniConfig.qqMapKey
|
|
return {
|
|
src: `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${key}&referer=uniapp`,
|
|
data: null
|
|
}
|
|
},
|
|
mounted () {
|
|
function handler (event) {
|
|
var loc = event.data
|
|
if (loc && loc.module === 'locationPicker') {
|
|
this.data = {
|
|
name: loc.poiname,
|
|
address: loc.poiaddress,
|
|
latitude: loc.latlng.lat,
|
|
longitude: loc.latlng.lng
|
|
}
|
|
}
|
|
}
|
|
this.__messageHandle = handler.bind(this)
|
|
window.addEventListener('message', this.__messageHandle, false)
|
|
},
|
|
beforeDestroy () {
|
|
window.removeEventListener('message', this.__messageHandle, false)
|
|
},
|
|
methods: {
|
|
_choose () {
|
|
if (this.data) {
|
|
UniViewJSBridge.publishHandler('onChooseLocation', Object.assign({}, this.data))
|
|
getApp().$router.back()
|
|
}
|
|
},
|
|
_back () {
|
|
UniViewJSBridge.publishHandler('onChooseLocation', null)
|
|
getApp().$router.back()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.uni-system-choose-location {
|
|
display: block;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f8f8f8;
|
|
}
|
|
|
|
.map-content {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 44px;
|
|
width: 100%;
|
|
bottom: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.map-content>iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|