<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>地图</title>
    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="container" style="width: 100%;height: 500px;"></div>
<div id="btn-area" style="display: none">
    <button onClick="geolocation.getLocation(showPosition, console.log(1), options)" style="display: none" id="sss">获取精确定位信息</button>
</div>
<script type="text/JavaScript">
    var geolocation = new qq.maps.Geolocation("YGZBZ-QSKCU-7LGVI-2WWXU-E5YEJ-2WFBA", "myapp");
    var options = {timeout: 8000};
</script>
</body>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YGZBZ-QSKCU-7LGVI-2WWXU-E5YEJ-2WFBA" ></script>
<script type="text/javascript">


    function showPosition(position) {
        window.lat = position.lat;
        window.lng = position.lng;
        var myLatlng = new qq.maps.LatLng(lat, lng);
        var myOptions = {
            zoom: 8,
            center: myLatlng,
            mapTypeId: qq.maps.MapTypeId.ROADMAP
        }
        var map = new qq.maps.Map(document.getElementById("container"), myOptions);
    };
    function init() {
        $('#sss').click();
    }

    function loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "https://map.qq.com/api/js?v=2.exp&callback=init";
        document.body.appendChild(script);
    }

    window.onload = loadScript;
</script>
</html>
