基于天地图标点html教程,基础地图-在线地图-天地图(无标注)
时间: 2023-10-02 13:05:57 浏览: 39
以下是基于天地图标点的HTML教程,实现基础地图在线地图无标注显示:
1. 打开天地图API官网(http://lbs.tianditu.gov.cn/),注册并获取自己的key。
2. 新建一个html文件,将以下代码复制进去:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天地图无标注地图示例</title>
<style type="text/css">
html,body,#map{
width:100%;
height:100%;
margin:0;
}
</style>
<script src="https://api.map.baidu.com/api?v=2.0&ak=your_key"></script>
<script type="text/javascript">
var map = new BMap.Map("map");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
var tileLayer = new BMap.TileLayer({isTransparentPng: true});
tileLayer.getTilesUrl = function(tileCoord, zoom){
var x = tileCoord.x;
var y = tileCoord.y;
return "http://t0.tianditu.com/DataServer?T=vec_w&x="+x+"&y="+y+"&l="+zoom;
};
map.addTileLayer(tileLayer);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
```
3. 将其中的`your_key`替换成自己在第一步中获取的key。
4. 保存文件并打开,即可看到一个无标注的天地图在线地图。
以上代码中,创建了一个百度地图对象,并设置地图中心点和缩放级别,启用了鼠标滚轮缩放功能。然后,通过BMap.TileLayer类创建了一个天地图矢量底图,将其添加到地图上。其中,getTilesUrl方法返回天地图对应切片的URL地址。最后,将地图显示在HTML页面中。