原因：
由于主流地图（百度，高德，腾讯）商用收费属实昂贵，不得已很多人开始转战天地图。
方案：
天地图想要在uniapp项目中正常使用目前的方案有两种
1.通过web-view将html天地图嵌入项目中
优点：可以同时兼容微信小程序和APP
缺点：地图嵌入后数据交互繁琐，小程序兼容了，但是兼的不是很容（由于微信小程序web-view原生组件必须占满全屏，无法修改大小）
2.通过renderjs直接操作dom来实现
优点：与页面数据交互更方便，无需考虑web-view在各个设备上带来的一些兼容问题
缺点：无法在微信小程序使用（小程序：我都没有dom，你想操作什么）
本篇文章我会采用第一种方案（后续可能会更新第二种）
本人十分不建议在微信小程序使用天地图，因为小程序本身的地图组件已经足够支撑一些简单的需求了。天地图嵌入小程序中，无论是使用还是开发都是非常灾难的体验。
开始
准备工作：
此步骤是为了app使用本地html页面，无需部署线上H5，微信小程序(必须使用线上H5)和使用线上H5的可以跳过此步骤
在项目中创建hybrid目录，在目录下创建对应的文件，此处的js是用来与父页面进行通讯使用的
js文件地址：
https://gitcode.net/dcloud/hello-uni-app-x/-/blob/alpha/hybrid/html/uni.webview.1.5.5.js
代码
map.html
<!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 onl oad() {
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%" onl oad="onLoad()">
<div id="mapDiv" style="width:100%; height:100%"></div>
</body>
</html>
page.vue
<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[0], '天地图发来的数据')
},
}
}
</script>
<style scoped lang="scss">
.map {
overflow: hidden;
position: relative;
height: 200px;
}
</style>
OK，你已经成功在uniapp项目中渲染出了天地图
文档
uniapp web-view
https://uniapp.dcloud.net.cn/component/web-view.html#web-view
天地图api
http://lbs.tianditu.gov.cn/api/js4.0/guide.html
问题和注意事项
由于天地图是属于国家项目，他的很多数据会与当前主流地图不同，如果你真的决定要用天地图就得先考虑好这些问题
列如：行政区划码长度（天地图带了国家），省市区等级（曾今是县，升级成了市），一些地名的变动（杭州的一些区）
天地图接口更新是没有文档说明的
天地图在接口更新或者废止的时候都是没有文档和通知的，有问题以后建议是直接通过电话和邮箱去联系天地图的工作人员，如果你的项目需要非常稳定，不可以出事故，那我建议还是老老实实交钱去用主流地图吧
天地图的经纬度编码
天地图使用的是CGCS2000，2000国家大地坐标系，与主流地图都不一样，不过该坐标系与地球坐标系(WGS-84)基本没有偏差，所以用的时候可以当做WGS-84来用。
标签：web,map,app,地图,lnglat,html,uni,view From： https://www.cnblogs.com/yilei-zero/p/18360851