腾讯地图初次使用

最新推荐文章于 2025-04-22 10:55:56 发布

地藏许菩萨

最新推荐文章于 2025-04-22 10:55:56 发布

阅读量7.3k

点赞数

分类专栏： pc前端腾讯地图

本文链接：https://blog.csdn.net/qq_40028729/article/details/79165247

版权

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

10 篇文章

订阅专栏

腾讯地图

1 篇文章

订阅专栏

腾讯地图初次使用心得

使用需求

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

第一步不管是使用腾讯地图还是百度地图都需要先申请开发秘钥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>