2d/3d/卫星地图转换+搜索 代码

226 阅读1分钟
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2d/3d/卫星地图转换+搜索</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=?"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container {
        width: 100%;
        height: 100%;
    }

    #panel {
        position: absolute;
        background: #FFF;
        width:300px;
        padding: 20px;
        z-index: 9999;
        top: 30px;
        left: 30px;
    }
    #btn-2d {
        left: 20px;
    }
    #btn-3d {
        left: 80px;
    }
    #btn-wx {
        left: 140px;
    }
</style>


<body>
<div id="container"></div>
<div id="panel">
    <p><label>地址</label><input id='address' type="text" value='' ><input id="convert" type="button" class="btn" value="搜索" onclick="convert()" /></p>
    <input type="button" id="btn-2d" onclick="change2D()" value="切换2D">
    <input type="button" id="btn-3d" onclick="change3D()" value="切换3D">
    <input type="button" id="btn-wx" onclick="changewx()" value="切换wx">
    <!--    <p><label>坐标</label><input id='location' type='text' disabled value='' /></p>-->
</div>
</body>

<script type="text/javascript">
    var map = new TMap.Map('container', {
        zoom: 14,
        center: new TMap.LatLng(39.986785, 116.301012),
    });
    var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
    var markers = new TMap.MultiMarker({
        map: map,
        geometries: [],
    });

    function convert() {
        markers.setGeometries([]);
        // 将给定的地址转换为坐标位置
        geocoder
            .getLocation({ address: document.getElementById('address').value })
            .then((result) => {
                markers.updateGeometries([
                    {
                        id: 'main',
                        position: result.result.location, // 将得到的坐标位置用点标记标注在地图上
                    },
                ]);
                map.setCenter(result.result.location);
                // document.getElementById(
                //     'location'
                // ).value = result.result.location.toString();
                // 显示坐标数值
            }); //message: "请求来源未被授权, 解决方法见:https://lbs.qq.com/faq/serverFaq/webServiceKey。此次请求来源域名:localhost63342"

    }

    function change2D() {
        map.setViewMode('2D');
    }

    function change3D() {
        map.setViewMode('3D');
        map.setPitch(70);
    }

    function changewx() {
        map.destroy(); // 销毁之前的地图
        var center = new TMap.LatLng(39.984104, 116.307503);
        //初始化地图
        map = new TMap.Map("container", {
            zoom:12,//设置地图缩放级别
            center: center,//设置地图中心点坐标
            baseMap: {  // 设置卫星地图
                type: 'satellite'
            }
        });
    }
</script>

</html>