[移动开发] 【省下5w】uniapp使用“天地图”地图API开发

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 【省下5w】uniapp使用“天地图”地图API开发 - 免费地图组件 -> 正文阅读

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

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