一、效果图
二、示例代码
<template>
<view style="">
<navBar :fixed="true" :shadow="false" :background-color="primaryColor" color="#fff" title="定位">
<view slot="left">
<view @tap="$util.goUrl({url:1,openType:'navigateBack'})" class="iconfont iconfanhui1 ml-md nav_c_text"
style="font-size: 40rpx;">
</view>
</view>
</navBar>
<view :style="{background:primaryColor,height:(navBarHeight)+'px'}"></view>
<view class="" :style="{height: (windowHeight-navBarHeight)+'px'}">
<view class="" v-html="html" style="width: 100%;height: 100%;padding-bottom: 100rpx;"></view>
<button style="position: absolute;bottom: 0;width: 100%;" type="primary" @click="MyMap.getpoint">保存定位</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
primaryColor: this.$util.primaryColor,
navBarHeight: this.$util.getNavBarHeight(),
windowHeight: uni.getSystemInfoSync().windowHeight,
html: '',
}
},
onLoad() {
this.initHtml()
},
methods: {
initHtml() {
this.html =
`<iframe id="mapPage" width="100%" height="100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=你的key&referer=myapp"></iframe>`;
},
getData(d) {
console.log(d)
}
}
}
</script>
<script module="MyMap" lang="renderjs">
export default {
data() {
return {
lat: '',
lng: '',
address: ''
}
},
mounted() {
window.removeEventListener('message', this.onMessage)
window.addEventListener('message', this.onMessage)
},
methods: {
onMessage(event) {
var loc = event.data;
if (loc && loc.module == 'locationPicker') { //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
console.log('location', loc);
this.lat = loc.latlng.lat;
this.lng = loc.latlng.lng;
this.address = loc.poiaddress;
}
},
getpoint(e, o) {
let data = {
lat: this.lat,
lng: this.lat,
address: this.address
}
if (o) {
o.callMethod('getData', data)
} else {
this.$o.callMethod('getData', data)
}
}
}
}
</script>
<style>
</style>
