image.png
image.png
从2021年开始三大地图运营商开始统一针对旗下地图业务进行使用授权收费，授权费用：5万元/年。
在工作过程中，或多或少的会使用到地图，但是地图开始收费后，就导致了很多的不方便。
为了节约开发成本（公司不想给授权费）只能够去寻找替代方案。
就目前来说，只有天地图是不需要授权费的，并且可以根据自己的项目需求结合天地图提供的api进行开发。
我使用的是iframe标签进行渲染，你可以现在按照天地图官方提供的demo（甚至是直接复制一个demo）部署到服务器上，拿到一个远程的访问地址，使用iframe标签展示到项目中
话不多说，上代码：
// 使用url传参的方式将需要的参数传递过去
// 当然了，很多的项目一开始使用的并不是天地图的经纬度坐标系，这里就需要你去转化一下
<iframe style="width: 100%;height: 100%;" src=`你拿到的访问地址?latitude=${this.latitude}&longitude=${this.longitude}` frameborder="0"></iframe>
// 在html页面中解析url拿到参数
var url = location.href.split('?')[1]
var arr = url.split('&')
var params = {}
arr.forEach(item => {
params[item.split('=')[0]] = item.split('=')[1]
})
// 拿到参数后使用
function onLoad() {
console.log('showMap')
map = new T.Map('mapDiv')
map.centerAndZoom(new T.LngLat(params.longitude, params.latitude), zoom)
//创建图片对象
var icon = new T.Icon({
iconUrl: "img/problem_feedback_icon.png",
iconSize: new T.Point(40, 40),
iconAnchor: new T.Point(20, 40)
})
//向地图上添加自定义标注
var marker = new T.Marker(new T.LngLat(params.longitude, params.latitude), {
icon: icon
})
map.addOverLay(marker)
//创建对象
geocode = new T.Geocoder();
let lnglat = new T.LngLat(params.longitude, params.latitude)
geocode.getLocation(lnglat, searchResult);
var markerInfoWin = new T.InfoWindow();
function searchResult(result) {
var sContent = `
<div style='margin:0px;'>
<div style='margin:10px 10px;font-size:14px;'>
<span style='color:#40C5B5;font-weight: bold;'>当前位置</span><br/>
<span>${params.longitude},${params.latitude}</span><br/>
<span>${result.getAddress()}</span>
</div>
</div>
`
markerInfoWin.setContent(sContent);
// 将标注添加到地图中
marker.openInfoWindow(markerInfoWin);
}
// 点击打开信息窗口
marker.addEventListener("click", function () {
marker.openInfoWindow(markerInfoWin);
});
}
// 同时，我自己的项目上需要进行双向通信，所以我引用了uniapp的webviewJS
// 在html页面引入webviewJS
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
// 通过uni.postMessage将消息发送到项目页面中
msgParams = {
address: result.getAddress()
}
uni.postMessage({
data: msgParams
});
// 在项目地图页面中添加
<view class="" :dataItem="dataItem" :change:dataItem="renderModal.dataChange"></view>
// 使用renderjs进行接受html页面传递的消息
<script module="renderModal" lang="renderjs">
export default {
data() {
return {
dom: '',
}
},
mounted() {
this.dom = document.getElementById('videoIframe')
// 接收iframe传过来的值
window.addEventListener('message', (e) => {
var data = e.data.data;
this.emitData(data.arg)
});
},
methods: {
emitData(e) {
// 将值传到当前页面
this.$ownerInstance.callMethod('receiveRenderData', e)
},
// data的值发生改变时会触发dataChange并且将值传到iframe页面中
dataChange(e) {
this.dom.contentWindow.postMessage(e, '*')
},
// 点击按钮时将值传到iframe页面中
dataClick() {
this.dom.contentWindow.postMessage('点击了按钮', '*')
}
}
}
</script>
// 在页面实例上添加事件
receiveRenderData(e){
// 打印检查是否成功通信
console.log(e);
}
// 如果你需要在项目中给html页面发送消息，你可以修改dataItem的值，然后在html页面进行监听
window.addEventListener('message', function (e) {
console.log(e);
})
这就是简单的uniapp使用天地图的基本示例，如果有误，请指出。
