admin管理员组文章数量:1566220
文章目录
- 一、使用步骤
- 1.注册腾讯地图
- 2.生成一个key
- 3.构建一个地图
- 4. 3d/2d地图转换
- 总结
一、使用步骤
1.注册腾讯地图
注册腾讯地图
2.生成一个key
注册完成之后进入控制台，点击创建秘钥并且将信息填写完成
3.构建一个地图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>创建地图</title>
</head>
<script charset="utf-8" src="https://map.qq/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
// OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77 替换成自己的key
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 100%;
}
</style>
<body onload="initMap()">
<div id="container"></div>
<script type="text/javascript">
function initMap() {
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
var map = new TMap.Map("container", {
rotation: 20,//设置地图旋转角度
pitch:30, //设置俯仰角度（0~45）
zoom:12,//设置地图缩放级别
center: center//设置地图中心点坐标
});
}
</script>
</body>
</html>
这样子就成功的构建了一张地图
4. 3d/2d地图转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2D/3D模式切换</title>
</head>
<script charset="utf-8" src="https://map.qq/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 100%;
position: relative;
}
input {
position: absolute;
top: 30px;
z-index: 9999;
}
#btn-2d {
left: 20px;
}
#btn-3d {
left: 80px;
}
</style>
<body>
<div id="container"></div>
<input type="button" id="btn-2d" onclick="change2D()" value="切换2D">
<input type="button" id="btn-3d" onclick="change3D()" value="切换3D">
<script type="text/javascript">
var center = new TMap.LatLng(39.984104, 116.307503);
//初始化地图
var map = new TMap.Map("container", {
zoom:12,//设置地图缩放级别
center: center//设置地图中心点坐标
});
function change2D() {
map.setViewMode('2D');
}
function change3D() {
map.setViewMode('3D');
map.setPitch(70);
}
</script>
</body>
</html>
这样就构建了一个可以切换3d或者2d的地图
总结
对于腾讯地图简单的使用就介绍这么多，观众们可以通过
腾讯地图的官方doc来查看更多的教程。
版权声明：本文标题：web接入腾讯地图的步骤 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1726065371a1053983.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论