【省下5w】uniapp使用“天地图”地图API开发 - 免费地图组件

Rudon滨海渔村

已于 2022-06-14 11:03:46 修改

阅读量1.6w

点赞数 11

分类专栏：开发 Web前端文章标签： webview vue.js android uniapp

于 2022-06-07 14:11:50 首次发布

本文链接：https://blog.csdn.net/qq285744011/article/details/125162871

版权

开发同时被 2 个专栏收录

241 篇文章

订阅专栏

Web前端

119 篇文章

订阅专栏

1> 传统地图的收费

国内的地图服务全面收费了_gaoyp的博客-CSDN博客_天地图收费标准最近高德地图频繁给公司打电话让缴费。说是商业应用都要交费。查了一下发现国内的地图三巨头应该是商量好了，全部收费，而且起步价一样，都是5万。只要是商业应用，起步价就都是5万。调用量大的话，还有加量包。这个价格真是不便宜了。苹果还好，实在不行，还可以用系统的地图服务，免费。Android就惨了，以前听Android的同事说，Android系统连自带的定位服务都没有，需要三方库支持。查了一下，现在国内的天地图还是免费的，天地图是国家测绘局背景的，还是国家的大气。但是官网上只找到的JS SDK。网上有找https://blog.csdn.net/gaoyp/article/details/123600012

2> uniapp地图map组件的收费

map | uni-app官网https://uniapp.dcloud.io/component/map.html#%E4%B8%89%E6%96%B9%E5%AE%9A%E4%BD%8D%E5%92%8C%E5%9C%B0%E5%9B%BE%E6%9C%8D%E5%8A%A1%E6%94%B6%E8%B4%B9%E8%AF%B4%E6%98%8E

3> uniapp使用免费的“天地图”

免费配额
http://lbs.tianditu.gov.cn/server/geocoding.html
注册账号
http://lbs.tianditu.gov.cn/server/geocoding.html
申请开发者资质（个人或企业）
创建应用，获取token（tk）
在uniapp中，使用webview来使用天地图的地图展示、搜索功能
web-view | uni-app官网https://uniapp.dcloud.io/component/web-view.html1）vue视图中，用webview标签，指向uniapp项目下 /hybrid/html/xxx.html
```
<template>
	<view>
		
		<web-view src="/hybrid/html/xxx.html"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
```
2) xxx.html中套用“天地图”的html代码，即可使用！（app端可能用）
JavaScript API 4.0 介绍 - 天地图APIhttp://lbs.tianditu.gov.cn/api/js4.0/guide.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>HELLO WORLD</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的天地图token"></script>
   <script>
        var map;
        var zoom = 12;
        function onLoad() {
			console.log('showMap');
            map = new T.Map('mapDiv');
            map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
			console.log('Done');
        }
    </script>
</head>

<body onLoad="onLoad()">

	<h2>MAP</h2>
    <div id="mapDiv" style="position:absolute;width:500px; height:400px"></div>

</body>
</html>

天地图的TOKEN怎么获取？需要先申请开发者账号，个人版的免费，每日限额次数够用：

升级向导 - 天地图http://lbs.tianditu.gov.cn/authorization/authorization.html