web端加载百度地图和天地图

2022-07-20 502 阅读1分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

在网页前端展现地图，根据业务需要采用百度地图或天地图，本文介绍引用百度地图和天地图的加载方式。详细介绍如下：

1.加载百度地图

在页面中引入js文件

<html>
<head>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.4&services=true"></script>
</head>
<body>
<div>
	<div id = "map"></div>
</div>
</body>
</html>

初始化地图


<script type="text/javascript">
	var map = new BMap.Map("map");//在百度地图容器中创建一个地图
	map.centerAndZoom('乐陵市', 12); // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
</script>

2.加载天地图

引入js文件
tk需要自己注册申请，具体申请流程详见天地图官网

<html>
<head>
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=tk" type="text/javascript"></script>
</head>
<body>
<div>
	<div id = "map"></div>
</div>
</body>
</html>

初始化地图


<script type="text/javascript">
	var map = new T.Map('map');
	var LngLat = new T.LngLat(117.225601,37.729007),//初始化中心点
	zoom = 10;
    map.centerAndZoom(LngLat , zoom);//设置缩放级别
</script>