国家地理信息服务平台——天地图使用指南

最新推荐文章于 2024-06-13 10:39:51 发布

封闭火车

最新推荐文章于 2024-06-13 10:39:51 发布

阅读量9.6k

点赞数 5

分类专栏： # Js 文章标签： javascript

本文链接：https://blog.csdn.net/growing1224/article/details/106574257

版权

Js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用准备

申请成为个人开发者或者企业开发者，获取调用地图api的key，下图为调用限额对比图。

开始绘制第一个地图

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>天地图－地图API－范例－经纬度直投地图</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
    <style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
    <script>
        var map;
        var zoom = 12;
        function onLoad() {
            map = new T.Map('mapDiv', {
                projection: 'EPSG:4326'
            });
            map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
        }
    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>本示例演示如何显示经纬度直投地图。</p>
</body>
</html>

运行结果

加上缩放放大组件

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>天地图－地图API－范例－添加缩放平移控件</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
    <style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
    <script>
        var map, control;
        var zoom = 12;
        function onLoad() {
            //初始化地图对象
            map = new T.Map("mapDiv");
            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);
            //创建缩放平移控件对象
            control = new T.Control.Zoom();
            //添加缩放平移控件
            map.addControl(control);
            control.setPosition(T_ANCHOR_TOP_RIGHT);
        }
    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
</body>
</html>

效果:

添加自定义图片标注

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>天地图－地图API－范例－自定义标注图片</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
    <style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
    <script>
        var map;
        var zoom = 12;
        function onLoad() {
            //初始化地图对象
            map = new T.Map("mapDiv");
            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom);
            //创建缩放平移控件对象
            control = new T.Control.Zoom();
            //添加缩放平移控件
            map.addControl(control);
            control.setPosition(T_ANCHOR_TOP_RIGHT);
            //创建图片对象
            var icon = new T.Icon({
                iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",
                iconSize: new T.Point(19, 27),
                iconAnchor: new T.Point(10, 25)
            });
            //向地图上添加自定义标注
            var marker = new T.Marker(new T.LngLat(116.411794, 39.9068), {icon: icon});
            map.addOverLay(marker);
        }
    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" ></div>
<p>本示例演示如何自定义标注图片。</p>
</body>
</html>

运行结果

添加事件

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>天地图－地图API－范例－信息窗口</title>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
    <style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
    <script>
        var map;
        var zoom = 12;
        var center;
        var localsearch;
        var radius = 5000;
        var infoWin;
        function onLoad() {
        	center = new T.LngLat(116.63072 ,40.054952);
            //初始化地图对象
            map = new T.Map("mapDiv");
            //设置显示地图的中心点和级别
            map.centerAndZoom(center, zoom);
            createMaker();
        }
      
      function createMaker(){
        	var icon = new T.Icon({
                            iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",
                            iconSize: new T.Point(19, 27),
                            iconAnchor: new T.Point(10, 25)
             });
      	    var marker = new T.Marker(center, {icon: icon});// 创建标注
       	    map.addOverLay(marker);
            var infoWin1 = new T.InfoWindow();
            var sContent =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<div>电话 : (010)88187700 <br>地址：北京市顺义区机场东路国门商务区地理信息产业园2号楼天地图大厦" +
                "</div>" +
                "</div>";
            infoWin1.setContent(sContent);
            marker.addEventListener("click", function () {
            marker.openInfoWindow(infoWin1);
            });// 将标注添加到地图中
      }
      function clearAllMarkLayer(){
    		map.clearOverLays();
	  }
    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" ></div>
<p>本示例演示如何在地图上显示一个信息浮窗。</p>
<div id="resultDiv"></div>
</body>
</html>

效果:

封闭火车

关注

5
点赞
踩
19

收藏

觉得还不错? 一键收藏
2
评论
国家地理信息服务平台——天地图使用指南

使用准备申请成为个人开发者或者企业开发者，获取调用地图api的key，下图为调用限额对比图。开始绘制第一个地图 <!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="keywords" content="天地图"/> <tit..
复制链接

扫一扫