腾讯地图初次使用

最新推荐文章于 2024-03-29 16:37:44 发布

地藏许菩萨

最新推荐文章于 2024-03-29 16:37:44 发布

阅读量7.1k

点赞数

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

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

版权

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

10 篇文章 0 订阅

订阅专栏

腾讯地图

1 篇文章 0 订阅

订阅专栏

腾讯地图初次使用心得

使用需求

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

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

地藏许菩萨

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
腾讯地图初次使用

腾讯地图初次使用心得使用需求点击会议召开位置显示地图第一步不管是使用腾讯地图还是百度地图都需要先申请开发秘钥key在使用的时候引入秘钥key具体的显示效果下面放代码html>head> meta http-equiv="Content-Type" content="text/html; charset=utf-8"
复制链接

扫一扫