天地图官网：天地图API

一、介绍：天地图JavaScript API 4.0是一套符合HTML5.0规范的的应用程序接口，以HTML 5.0的形式提供各种地图服务和数据，如地图展示、标注、定位等。为开发者提供了快速调用天地图在线地理信息服务的通道，包括快速创建地图、调用地图、地名搜索以及在地图上添加覆盖物等。支持PC端和移动端基于浏览器的地图应用开发，支持主流的HTML4.0和HTML5.0特性的地图开发。

二、实现步骤：

1. 创建地图容器元素；
2. 引入天地图,tk：在官网申请；
3. 初始化地图对象；
4. 设置显示地图的中心点和级别；
5. 创建地图类型控件；
6. 将控件添加到地图，一个控件实例只能向地图中添加一次；
7. 创建坐标，通常是调取接口获得经纬度；
8. 创建覆盖使用的图标；
9. 创建在该坐标上的一个图像标注实例；
10. 将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次；

三、示例：vue +天地图实现地图上添加覆盖物；

<template>
	<view class="map-view">
        <!-- 1.创建地图容器元素 -->
		<view class="map" id="mapView"></view>
    </view>
</template>

<script>
	// 2.引入天地图,tk：在官网申请
	const MAP_URL = 'https://api.tianditu.gov.cn/api?v=4.0&tk=密钥';
	export default {
		name: "map-view",
		props: {
            zoom: {
				type: Number,
				default: 11
			}
		},
		data() {
			return {
				map: null,
				markers: []
			};
		},
		mounted() {
			//#ifdef H5
			this.initMap();
			//#endif
		},
		methods: {
			initMap() {
                // 3.初始化地图对象
				this.map = new T.Map("mapView", {});
                // 4.设置显示地图的中心点和级别
				this.map.centerAndZoom(new T.LngLat( 112.9388, 28.2280 ), this.zoom);
                // 5.创建地图类型控件
                const ctrl = new T.Control.MapType([{
					title: '地图',
   					icon:'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png',                     //地图控件上所要显示的图层图标（默认图标大小80x80）
					layer: window.TMAP_NORMAL_MAP
				}{
					title: '卫星',
					icon:'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
					layer: window.TMAP_SATELLITE_MAP
				}]);
                // 6.将控件添加到地图，一个控件实例只能向地图中添加一次。
                this.map.addControl(ctrl);
                // 7.创建坐标，通常是调取接口获得经纬度
                const point = new T.LngLat(112.9388, 28.2280);
                // 8.创建覆盖使用的图标
                const icon = new T.Icon({
					iconUrl:'../marker-red.png',
					iconSize: new T.Point(27, 27),
					iconAnchor: new T.Point(10, 25)
				});
                // 9. 创建在该坐标上的一个图像标注实例
                const marker = new T.Marker(point, icon);
                // 10.将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次
                this.map.addOverLay(marker);
			},
        }
    }   
<script>        
            

四、效果展示：