企业版地图各厂家已经开始联合收费，但是没有按需求收费，对于小公司企业不公平
临时解决方法：使用个人版（只针对需求量很少的地图使用）
uniapp 不使用自带的uni.chooseLocation使用地图选址方法
本文采用腾讯地图的方案
image.png
<iframe id="mapPage" width="100%" height="100%" frameborder=0
src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=your key&referer=myapp">
</iframe>
<script>
window.addEventListener('message', function(event) {
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
var loc = event.data;
if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
console.log('location', loc);
}
}, false);
</script>
uniapp 使用的不是纯 web 环境，不能直接使用 window ，document
方案：使用 html 集成，然后利用 web-view 中转通讯
image.png
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择位置</title>
<style type="text/css">
.container {
display: flex;
flex-direction: column;
flex: 1;
height: 100vh;
}
</style>
</head>
<body>
<div class="container" id="lauwen">
<iframe id="mapPage" width="100%" height="100%" frameborder="0"></iframe>
</div>
<script type="text/javascript" src="js/uni.webview.1.5.5.js"></script>
<script type="text/javascript">
// 在 html 中 获取路由参数
var iframe = document.getElementById('mapPage');
const searchParams = window.location.search.replace('?', '&');
const urlSrc = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&referer=myapp` + searchParams;
console.log('urlSrc:', urlSrc);
iframe.src = urlSrc;
window.addEventListener('message', function (event) {
// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
var loc = event.data;
if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
uni.postMessage({
data: loc
});
}
}, false);
// function webReceiveData(data) {
// var parseData = JSON.parse(data)
// document.getElementById('msg').innerText = `接收到的消息：${parseData.msg}`
// }
</script>
</body>
</html>
这里只做了从 web-view 地址传值，以及 h5 的回调传值，没有做 web-view 直接发消息到 h5，因为暂时满足要求了，有需要可以自行搜索
<template>
<view class="content">
<web-view :src="mapUrl" @message="receiveData" v-if="mapUrl"></web-view>
</view>
</template>
<script setup>
import { ref, onMounted } from "vue";
const mapUrl = ref("");
const emit = defineEmits(["didGetLocation"]);
onMounted(() => {
const tencentMapKey = uni.getStorageSync("tencentMapKey");
uni.getLocation({
type: "gcj02",
success: function (res) {
console.log("定位成功", res.latitude, res.longitude);
mapUrl.value = `/hybrid/html/index.html?coord=${res.latitude},${res.longitude}&key=${tencentMapKey}`;
},
fail: function (err) {
// console.error("定位失败", err);
mapUrl.value = `/hybrid/html/index.html`;
},
});
});
function receiveData(data) {
emit("didGetLocation", data);
}
</script>
<style></style>
接口获取 appKey 方便过期了替换
