更新记录
1.0.1(2024-07-26)
下载此版本
优化使用说明
1.0.0(2024-07-26)
下载此版本
使用renderjs方式,将腾讯地图嵌入页面。支持APP内使用。
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
qq-renderjs-map
组件代码
qq-renderjs-map.vue
<template>
<view class="container">
<iframe id="mapPage" width="100%" height="100%" frameborder=0
:src="src">
</iframe>
<view class="z-btn-plus map-btn">
<button @click="myxd.selectOk">选定</button>
</view>
</view>
</template>
<script>
export default {
props: ['mapKey'],
data(){
return {
longitude: 116.39742,
latitude: 39.909,
address: '122323',
}
},
computed: {
src(){
let src= `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${this.mapKey}&referer=myapp`
return src
}
},
methods:{
parentSelectOk(obj){
console.log('选定了', obj);
let self = this
self.address = obj.address
uni.$emit('locateOk', {latitude: obj.latitude, longitude: obj.longitude, address: obj.address})
uni.navigateBack()
}
},
}
</script>
<script module="myxd" lang="renderjs">
let obj = {}
export default {
mounted(){
window.addEventListener('message', function(event) {
// 接收位置信息,用户选择确认位置点后选点组件会触发该事件,回传用户的位置信息
var loc = event.data;
if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息,需判断module是否为'locationPicker'
console.log('location', loc);
}
obj.latitude = loc.latlng.lat
obj.longitude = loc.latlng.lng
obj.address = loc.poiaddress
console.log('myxd obj', obj);
}, false);
},
methods:{
selectOk(event, ownerInstance){
ownerInstance.callMethod('parentSelectOk', obj)
}
}
}
</script>
<style scoped>
.z-btn-plus {
position: fixed;
bottom: 20rpx;
right: 10rpx;
z-index: 1;
/* #ifdef APP-PLUS */
opacity: 0.6;
/* #else APP-PLUS */
opacity: 0.6;
/* #endif */
}
.container {
/*地图(容器)显示大小*/
width:100%;
height: 1200rpx;
}
.map-btn {
position: fixed;
bottom: 20%;
right: 10rpx;
}
</style>
地图页面引入组件
qqmap.vue
<template>
<view>
<qq-renderjs-map :mapKey="mapKey"></qq-renderjs-map>
</view>
</template>
<script>
export default {
data() {
return {
mapKey: ''
}
},
onLoad(options){
this.mapKey = options.mapKey
},
methods: {
}
}
</script>
<style>
</style>
页面跳转地图页面:
index.vue
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view>
<view>纬度: {{latitude}}</view>
<view>经度: {{longitude}}</view>
<view>地址: {{address}}</view>
</view>
<button @click="selectClick">选择地点</button>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
latitude: '',
longitude: '',
address: '',
mapKey: 'your key' // 你的腾讯地图key
}
},
onLoad() {
},
methods: {
selectClick(){
let self = this
// 监听选定事件
uni.$once('locateOk',function(data){
console.log('监听到事件来自 locateOk ,携带参数 data 为:', data);
self.address = data.address
self.latitude = data.latitude
self.longitude = data.longitude
})
uni.navigateTo({
url: `/pages/qqmap/qqmap?mapKey=${this.mapKey}`
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
地图选定后,通过uniapp的 uni.$emit
和 uni.$once
实现数据传递,获得选择的点信息。
注意事项
把index.vue中的mapKey替换为你的qq地图key,需要开通逆地址解析和地点搜索。