uni-app使用天地图
<h2 id="原因">原因：</h2><p>由于主流地图（百度，高德，腾讯）商用收费属实昂贵，不得已很多人开始转战天地图。<br>
</p>
<h2 id="方案">方案：</h2>
<p>天地图想要在uniapp项目中正常使用目前的方案有两种</p>
<p><strong>1.通过web-view将html天地图嵌入项目中</strong><br>
<br>
优点：可以同时兼容微信小程序和APP</p>
<p>缺点：地图嵌入后数据交互繁琐，小程序兼容了，但是兼的不是很容（由于微信小程序web-view原生组件必须占满全屏，无法修改大小）<br>
</p>
<p><strong>2.通过renderjs直接操作dom来实现</strong><br>
<br>
优点：与页面数据交互更方便，无需考虑web-view在各个设备上带来的一些兼容问题</p>
<p>缺点：无法在微信小程序使用（小程序：我都没有dom，你想操作什么）</p>
<h3 id="本篇文章我会采用第一种方案后续可能会更新第二种">本篇文章我会采用第一种方案<span style="color: rgba(255, 0, 0, 1); font-size: 14px">（后续可能会更新第二种）</span></h3>
<p><em>本人十分不建议在微信小程序使用天地图，因为小程序本身的地图组件已经足够支撑一些简单的需求了。天地图嵌入小程序中，无论是使用还是开发都是非常灾难的体验。</em><br>
</p>
<h2 id="开始">开始</h2>
<h3 id="准备工作">准备工作：</h3>
<p><span style="color: rgba(255, 0, 0, 1); font-size: 12px">此步骤是为了app使用本地html页面，无需部署线上H5，微信小程序(必须使用线上H5)和使用线上H5的可以跳过此步骤</span></p>
<p>在项目中创建hybrid目录，在目录下创建对应的文件，此处的js是用来与父页面进行通讯使用的</p>
<p>js文件地址：<br>
https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/hybrid/html/uni.webview.1.5.5.js</p>
<p><img src="https://img2024.cnblogs.com/blog/1917308/202408/1917308-20240815150548612-1584235437.png" alt="image" loading="lazy"><br>
</p>
<h2 id="代码">代码</h2>
<p><strong>map.html</strong></p>
<pre><code><!DOCTYPE html>
<html style="">
<head>
<meta charset="UTF-8"/>
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<title></title>
<!-- 引入uniapp -->
<script src="./js/hybrid_html_uni.webview.1.5.5.js" type="text/javascript"></script>
<!-- 引入天地图 -->
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=秘钥" type="text/javascript"></script>
<script>
let map; //地图实例
let zoom = 16; //缩放等级
//等待dom加载
function onLoad() {
let lnglat = {};
map = new T.Map('mapDiv');//实例化地图
map.centerAndZoom(new T.LngLat(114.09974, 22.549), zoom);//默认数值
let geolocation = new T.Geolocation()
getCurrentPositionCallback = function (e) {
//根据经纬度重新设置地图
if (this.getStatus() == 0) {
map.centerAndZoom(e.lnglat, 16)
lnglat = e.lnglat
var marker = new T.Marker(e.lnglat);
map.addOverLay(marker);
}
if (this.getStatus() == 1) {
map.centerAndZoom(e.lnglat, e.level)
lnglat = e.lnglat
var marker = new T.Marker(e.lnglat);
map.addOverLay(marker);
}
}
//获取当前用户经纬度
geolocation.getCurrentPosition(getCurrentPositionCallback);
// 等待uniapp加载完成后发送信息
document.addEventListener('UniAppJSBridgeReady', function () {
uni.postMessage({
data: {
title: '天地图',
msg: '我滴任务完成啦'
},
})
})
}
</script>
<style>
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
transform: translateX(-1.5px);
}
</style>
</head>
<body style="width:100%; height:100%" onLoad="onLoad()">
<div id="mapDiv" style="width:100%; height:100%"></div>
</body>
</html>
</code></pre>
<p> <br>
<strong>page.vue</strong></p>
<pre><code><template>
<view class="map">
<web-view src="/hybrid/html/map.html"
@onPostMessage="handlePostMessage"
@message="handlePostMessage"
:webview-styles="webviewStyles">
</web-view>
</view>
</template>
<script>
export default {
data() {
return {
webviewStyles: { // web-view样式
width: "95%",
height: 200,
top: 150,
left: '2.5%'
},
}
},
methods: {
//获取天地图参数
handlePostMessage(data) {
console.log(data.detail.data, '天地图发来的数据')
},
}
}
</script>
<style scoped lang="scss">
.map {
overflow: hidden;
position: relative;
height: 200px;
}
</style>
</code></pre>
<p><strong>OK，你已经成功在uniapp项目中渲染出了天地图</strong><br>
</p>
<h2 id="文档">文档</h2>
<p><strong>uniapp web-view</strong><br>
https://uniapp.dcloud.net.cn/component/web-view.html#web-view</p>
<p><strong>天地图api</strong><br>
http://lbs.tianditu.gov.cn/api/js4.0/guide.html<br>
</p>
<h2 id="问题和注意事项">问题和注意事项</h2>
<p><strong>由于天地图是属于国家项目，他的很多数据会与当前主流地图不同，如果你真的决定要用天地图就得先考虑好这些问题</strong></p>
<p>列如：行政区划码长度（天地图带了国家），省市区等级（曾今是县，升级成了市），一些地名的变动（杭州的一些区）<br>
<br>
<strong>天地图接口更新是没有文档说明的</strong></p>
<p>天地图在接口更新或者废止的时候都是没有文档和通知的，有问题以后建议是直接通过电话和邮箱去联系天地图的工作人员，如果你的项目需要非常稳定，不可以出事故，那我建议还是老老实实交钱去用主流地图吧<br>
<br>
<strong>天地图的经纬度编码</strong></p>
<p>天地图使用的是CGCS2000，2000国家大地坐标系，与主流地图都不一样，不过该坐标系与地球坐标系(WGS-84)基本没有偏差，所以用的时候可以当做WGS-84来用。</p><br><br>
来源：https://www.cnblogs.com/yilei-zero/p/18360851
頁:
[1]