js绘制地图简单示例

js地图绘制:

1.准备一个简单的html文件,添加一个div,其id为”mapDiv”

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

2.引入地图的JavaScript API文件:

<script src="http://api.tianditu.com/api?v=4.0" type="text/javascript"></script>

3.创建地图对象

var map = new T.Map('mapDiv');

4.初始化坐标点对象,确定经纬度坐标和层级

var zoom = 12;
var t = new T.LngLat(116.40769, 39.89945);

5.绘制地图

 map.centerAndZoom(t, zoom);

示例如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>HELLO WORLD</title>
    <script type="text/javascript" src="http://api.tianditu.com/api?v=4.0"></script>
    <script>
        var map;               //地图对象
        var zoom = 12;         //层级,值越大,地图范围越小
        var lon = 116.40769;   //经度
        var lat = 39.89945;    //纬度
        var t = new T.LngLat(lon, lat);
        function onLoad() {
            map = new T.Map('mapDiv');
            map.centerAndZoom(t, zoom);
        }
    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" style="position:absolute;width:800px; height:500px"></div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/c15158032319/article/details/79989055