web接入腾讯地图的步骤

最新推荐文章于 2023-04-20 20:41:41 发布

我可是千机伞

最新推荐文章于 2023-04-20 20:41:41 发布

阅读量1.4k

点赞数 1

分类专栏： Java 文章标签：腾讯 js html

本文链接：https://blog.csdn.net/m0_46159309/article/details/111857119

版权

Java 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

一、使用步骤
总结

一、使用步骤

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.com/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.com/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来查看更多的教程。

我可是千机伞

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
web接入腾讯地图的步骤

文章目录一、使用步骤1.注册腾讯地图2.生成一个key3.构建一个地图4. 3d/2d地图转换总结一、使用步骤1.注册腾讯地图注册腾讯地图2.生成一个key注册完成之后进入控制台，点击创建秘钥并且将信息填写完成3.构建一个地图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid
复制链接

扫一扫