腾讯地图初次使用

腾讯地图初次使用心得

使用需求

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

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

腾讯地图初次使用_第1张图片

在使用的时候引入秘钥key

腾讯地图初次使用_第2张图片

具体的显示效果

腾讯地图初次使用_第3张图片

下面放代码


<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>

你可能感兴趣的:(pc前端,腾讯地图)