腾讯地图初次使用

最新推荐文章于 2025-06-19 15:35:50 发布

原创最新推荐文章于 2025-06-19 15:35:50 发布 · 7.3k 阅读

3 ·

CC 4.0 BY-SA版权

pc前端同时被 2 个专栏收录

10 篇文章

订阅专栏

腾讯地图

1 篇文章

订阅专栏

本文介绍如何使用腾讯地图API实现地理位置定位及地图展示功能。通过具体示例代码演示了从申请开发密钥到在网页上加载并显示特定地点地图的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

腾讯地图初次使用心得

使用需求

点击会议召开位置
显示地图

第一步不管是使用腾讯地图还是百度地图都需要先申请开发秘钥key

这里写图片描述

在使用的时候引入秘钥key

这里写图片描述

具体的显示效果

这里写图片描述

下面放代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>腾讯地图-简单地图示例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />

    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0px;
            padding: 0px;
        }

        body,
        button,
        input,
        select,
        textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }

        p {
            width: 603px;
            padding-top: 3px;
            overflow: hidden;
        }

        .btn {
            width: 142px;
        }

        #container {
            width: 100%;
            height: 400px;
        }
    </style>
</head>

<body>
    <div id="container">

    </div>
    // 秘钥我删除了大部分，使用的时候替换成自己的就可以了
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=HVABZ-YPTCNWBMY
    "></script>
    <script type="text/javascript">


        window.onload = function () {
            //直接加载地图
            //初始化地图函数  自定义函数名init

            var address = '中国,湖北省,仙桃,市政府';
            var geocoder = new qq.maps.Geocoder();
            //对指定地址进行解析  
            geocoder.getLocation(address);
            //设置服务请求成功的回调函数  
            geocoder.setComplete(function (result) {
                console.log(result);
                // 纬度
                var lat = result.detail.location.lat;
                // 经度
                var lng = result.detail.location.lng;

                console.log(lat);
                console.log(lng);
                //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
                var map = new qq.maps.Map(document.getElementById("container"), {
                    center: new qq.maps.LatLng(lat, lng),      // 地图的中心地理坐标。
                    zoom: 14                                                // 地图的中心地理坐标。
                });
                // 在这个位置添加一个覆盖物
                var marker = new qq.maps.Marker({
                    position: new qq.maps.LatLng(lat, lng),
                    map: map
                });
                   //  添加文本标注
                var label = new qq.maps.Label({
                    position: new qq.maps.LatLng(lat, lng),
                    // 这个位置文本标注位置偏移使用
                    offset: new qq.maps.Size(-100, -0),
                    map: map,
                    content: '海淀区,西三环,广源闸5号广源大厦二层8222'
                });
            });
            //若服务请求失败，则运行以下函数  
            geocoder.setError(function () {
                alert("出错了，请输入正确的地址！！！");
            });

        }

        };


    </script>

</body>

</html>