【初步配置】
1.首先需要到天地图平台注册账号,并完成开发者认证
地址：https://www.tianditu.gov.cn/
2.注册完成账号后,进入天地图的控制台,然后创建应用
这里应用为网站也就是浏览器应用，所以选择浏览器应用即可
创建时还需要填写域名白名单和应用名字
应用名称：自定义名字即可,可以是网站的名字
域名白名单：网站的域名地址
创建完成后复制一下密钥，后面代码中会用到.
由于之前配置没有截图，所以这部分仅用文字说明，天地图的控制台操作很简洁，清晰易懂.
【代码】
代码部分，可以在天地图网站导航栏点击"开发资源"会转到天地图API
导航栏有网页API，选择API4.0点进去就可以，后面会有指导和代码示例，看你想要实现那种网站地图效果，将示例代码嵌入到你的地图页面即可。
这里直接写一下个人使用的代码，有多种效果可以实现，具体看代码示例部分.
1.首先引入天地图api并填写在控制台获取的密钥，密钥是在创建完应用后就会有，复制即可.
2.将地图部分代码写到对应页面即可，注意是script，里面的sContent部分的信息可以填自己的
3.需要将html的id修改为mapDiv，然后调用onLoad()方法，具体可以看示例代码,其实就是在加载时调用一下.
4.center = new T.LngLat()的经纬度修改为自己的
html
<script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=密钥"></script>
<!-- 地图 -->
<script>
var map;
var zoom = 15;
var center;
var localsearch;
var radius = 5000;
var infoWin;
function onLoad() {
center = new T.LngLat(经纬度,经纬度);
//初始化地图对象
map = new T.Map("mapDiv");
//设置显示地图的中心点和级别
map.centerAndZoom(center, zoom);
//创建信息窗口对象
marker = new T.Marker(center);// 创建标注
map.addOverLay(marker);
var infoWin1 = new T.InfoWindow();
var sContent =
"<div style='margin:0px;'>" +
"<div style='margin:10px 10px; '>" +
"<img style='float:left;margin:0px 10px' src='' width='101' height='49' title=''/>" +
"<div style='margin:10px 0px 10px 120px;'>电话 : <br>地址：" +
"</div>" +
"<input id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
"<input style='margin-left:195px; width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索' onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,center,radius)\">" +
"</div>" +
"</div>";
infoWin1.setContent(sContent);
marker.addEventListener("click", function () {
marker.openInfoWindow(infoWin1);
});// 将标注添加到地图中
var config = {
pageCapacity:10, //每页显示的数量
onSearchComplete:localSearchResult //接收数据的回调函数
};
//创建搜索对象
localsearch = new T.LocalSearch(map,config);
}
function localSearchResult(result)
{
//清空地图及搜索列表
clearAll();
//创建圆
createCircle();
//解析点数据结果
pois(result.getPois());
}
//解析点数据结果
function pois(obj)
{
if(obj)
{
//坐标数组，设置最佳比例尺时会用到
var zoomArr = [];
for(var i=0;i<obj.length;i++)
{
//闭包
(function(i){
//名称
var name = obj[i].name;
//地址
var address = obj[i].address;
//坐标
var lnglatArr = obj[i].lonlat.split(" ");
var lnglat = new T.LngLat(lnglatArr[0],lnglatArr[1]);
var winHtml = "地址:"+address;
//创建标注对象
var marker = new T.Marker(lnglat);
//地图上添加标注点
map.addOverLay(marker);
//注册标注点的点击事件
marker.addEventListener("click", function () {
this.showPosition(marker, name, winHtml);
}, this)
zoomArr.push(lnglat);
//在页面上显示搜索的列表
var a = document.createElement("a");
a.href = "javascript://";
a.innerHTML = name;
a.onclick = function(){
showPosition(marker,name,winHtml);
}
})(i);
}
}
}
//圆形
function createCircle()
{
var config = {
color: "blue", //折线颜色
fillColor: "#fff", //填充颜色。当参数为空时，折线覆盖物将没有填充效果
weight: "3", //折线的宽度，以像素为单位
opacity: 0.5, //折线的透明度，取值范围0 - 1
fillOpacity: 0.4,
lineStyle: "solid" //折线的样式，solid或dashed
};
//定义该矩形的显示区域
var circle = new T.Circle(center,radius,config);
map.addOverLay(circle);
}
//显示信息框
function showPosition(marker, name, winHtml) {
if (infoWin) {
map.removeOverLay(infoWin);
infoWin = null;
}
var html = "<h3>" + name + "</h3>";
html += winHtml;
infoWin = new T.InfoWindow(html);
marker.openInfoWindow(infoWin);
}
//清空地图及搜索列表
function clearAll()
{
map.clearOverLays();
}
</script>