想要实时掌控对方踪迹，移动端地图组件接入给你灵感

2020-12-23 22:30:10 阅读：193 来源： 互联网

前言：小A是个工程师，他暗恋小G已经很长时间了，但是小G似乎对他没有什么特殊的感觉，这让小A心里很抓狂，特别想知道小G的位置，哈哈，怎么办呢? 小A就想了一个办法，借用自己的特长，开发了一个好玩的游戏，这个游戏的需要每天进来完成任务，但是如何通过这个游戏去获取小G的位置呢? 那肯定首先需要接入地图组件，然后当小G玩游戏的时候，通过地图组件偷偷上报小G的位置，这样就能知道她的位置了，想到了这里，小A笑裂了嘴，说干就干，只要想法不滑坡，办法总比困难多

希望：这篇文章以故事的方式呈现，其实就是教大家如何接入地图组件，如是纯属虚构，如有雷同，纯属巧合

目录

一、稳定的地图组件

二、申请开发密钥key

三、加载地图API的两种方式

四、创建简单地图

一、稳定的地图组件

网络上地图组件多如牛毛，如何选择稳定，高效且准确度高才是小A的选择
小A对比了腾讯，阿里，高德等牛逼的大厂的组件，最终选择了腾讯位置服务
腾讯位置服务小巧、调用简单、文档齐全非常适合初学者使用
另外精确度才是最重要的，毕竟这才是小A的目的
这里以web端Javascript API进行讲解接入

二、申请开发密钥key

腾讯位置服务开发密钥管理地址: https://lbs.qq.com/dev/console/key/manage
点击创建密钥，填写名称和用途即可
每种服务每日可以免费调用1W次，调用次数完全足够了，这对小A而言完全绰绰有余呀

三、加载地图API的两种方式

第一种: 页面中直接引入以下代码
引入格式: https://map.qq.com/api/js?v=2.exp&key=你申请的密钥

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=EC3BZ-ULH34-6D6U5-XPP52-D2IV3-JLBRI"></script>

第二种: 异步加载
其实原理就是触发onload回调函数后引入js文件

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://map.qq.com/api/js?v=2.exp&key=EC3BZ-ULH34-6D6U5-XPP52-D2IV3-JLBRI&callback=init";
  document.body.appendChild(script);
}
 
window.onload = loadScript;

四、创建简单地图

我这种js匿名函数的自调用方式，初学者看不懂的话，可以自己定义一个方法，然后调用函数名即可
地图基础配置如下:

var map = new qq.maps.Map(document.getElementById("container"), {
        mapTypeId:qq.maps.MapTypeId.SATELLITE,//设置地图类型-卫星地图,街道地图等
        disableDefaultUI: true,   //禁止所有控件
        panControl: true,         //平移控件的初始启用/停用状态。      
        zoomControl: false,       //缩放控件的初始启用/停用状态。
        scaleControl: true,        //滚动控件的初始启用/停用状态。
        center: new qq.maps.LatLng(39.916527,116.397128), // 地图的中心地理坐标。
        zoom:8  // 缩放级别
    });

<!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:100%;
    }
</style>
</head>
<body>
<div id="container"></div>
<script src="https://map.qq.com/api/js?v=2.exp&key=EC3BZ-ULH34-6D6U5-XPP52-D2IV3-JLBRI"></script>
<script>
!function() {
    //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
    var map = new qq.maps.Map(document.getElementById("container"), {
            center: new qq.maps.LatLng(39.916527,116.397128), // 地图的中心地理坐标。
            zoom:8  // 缩放级别
        });
}();
</script>
</body>
</html>

结果预览

五、添加地图事件

同样的html结构，我就不重复写了，只贴出重要的逻辑部分

<script>
!function (){
    //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
        var map = new qq.maps.Map(document.getElementById("container"), {
        center: new qq.maps.LatLng(39.916527,116.397128),      // 地图的中心地理坐标。
        zoom:8                                                 // 缩放级别
    });

    //添加点击地图点击事件
    var listener = qq.maps.event.addListener(
        map,
        'click',
        function() {
            alert('您点击了地图。');
        }
    );
}();
</script>

结果预览

六、添加地图控件

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset = utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>添加控件</title>
    <style>
        html, body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        
        #map-canvas {
            height: 100%
        }

        @media print {
            html, body {
                height: auto;
            }

            #map-canvas, #map_canvas {
                height: 650px;
            }
        }
    </style>
</head>
<body>
<div id="container" style="min-width:600px;min-height:100%;"></div>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=EC3BZ-ULH34-6D6U5-XPP52-D2IV3-JLBRI"></script>
<script>
    !function(){
        var map = new qq.maps.Map(document.getElementById("container"),{
            center: new qq.maps.LatLng(39.914850, 116.403765),
            zoom: 13,
            
        });

        //目前支持 ALIGN.TOP_LEFT， ALIGN.TOP_RIGHT，ALIGN.BOTTOM_LEFT， ALIGN.BOTTOM_RIGHT 四个取值，分别为左上角、右上角、左下角、右下角
        var scaleControl = new qq.maps.ScaleControl({
            align: qq.maps.ALIGN.BOTTOM_LEFT,
            margin: qq.maps.Size(85, 15),
            map: map
        });
    }();
</script>
</body>
</html>

结果预览

七、添加窗口信息

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>添加信息窗口</title>
<style type="text/css">
    html,body{
        width:100%;
        height:100%;
    }
    #container{
        width:100%;
        height:90%;
    }
    *{
        margin:0px;
        padding:0px;
    }
    body, button, input, select, textarea {
        font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
    }
    #info{
        width:603px;
        padding-top:3px;
        overflow:hidden;
    }
    .btn{
        width:142px;
    }
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=EC3BZ-ULH34-6D6U5-XPP52-D2IV3-JLBRI"></script>
<script>
var init = function() {
    var center = new qq.maps.LatLng(39.910390,116.397369);
    var map = new qq.maps.Map(document.getElementById('container'),{
        center: center,
        zoom: 13
    });
    var infoWin = new qq.maps.InfoWindow({
        map: map
    });
    infoWin.open();
    infoWin.setContent('Hello world');
    infoWin.setPosition(map.getCenter());
    //setMap
    var mapM=document.getElementById("mapM");
    qq.maps.event.addDomListener(mapM,"click",function(){
        if(infoWin.getMap()){
            infoWin.setMap(null);
        }else{
            infoWin.setMap(map);
        }
    });
    //setVisible
    var flag=true;
    var setP=document.getElementById("setP");
    var latLng=new qq.maps.LatLng(39.908701,116.397497);
    qq.maps.event.addDomListener(setP,"click",function(){
        infoWin.setMap(map);
        if(flag){
            flag=false;
            infoWin.setPosition(latLng);
        }else{
            flag=true;
            infoWin.setPosition(center);
        }
    });
}
</script>
</head>
<body onl oad="init()">
<div id="container"></div>
<div id="info">
    <button id="mapM" class="btn">setMap</button>
    <button id="setP" class="btn">setPosition</button>
</div>
</body>
</html>

结果预览

八、添加路况

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>加载实时路况图层</title>
<style type="text/css">
    html,body{
        width:100%;
        height:100%;
    }
    #container{
        width:100%;
        height:90%;
    }
    *{
        margin:0px;
        padding:0px;
    }
    body, button, input, select, textarea {
        font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
    }
    button{
        width:280px;
    }
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=EC3BZ-ULH34-6D6U5-XPP52-D2IV3-JLBRI"></script>
<script>
function init() {
    var map = new qq.maps.Map(document.getElementById("container"), {
        // 地图的中心地理坐标。
        center: new qq.maps.LatLng(39.916527,116.397128),
        zoom:13
    });

    //添加地图导航平移控件
    var navControl = new qq.maps.NavigationControl({
        align: qq.maps.ALIGN.TOP_LEFT,
        margin: new qq.maps.Size(5, 15),
        map: map
    });
    
    //实时路况图层
    var layer = new qq.maps.TrafficLayer();
    layer.setMap(map);
}

</script>
</head>
<body onl oad="init()">
<div style="width:100%;height:767px" id="container"></div>
<p>加载实时路况图层。</p>
</body>
</html>

结果预览

九、更多

更多操作，请看官方文档: https://lbs.qq.com/webDemoCenter/javascriptV2/mapOperate/createMap

标签：qq,掌控,灵感,map,地图,var,maps,组件,new
来源： https://blog.csdn.net/weixin_41635750/article/details/111499525

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9