高德地图点标记自动缩放

最新推荐文章于 2024-05-11 16:22:41 发布

wgod

最新推荐文章于 2024-05-11 16:22:41 发布

阅读量2.9k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44324124/article/details/110181726

版权

地图监听事件，map.getZoom(); //获取当前地图级别，再根据级别处理点标记size

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>事件系统</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div class="info">
        <h4 id="text"></h4>
        <p>当前级别：<span id="map-zoom">15</span></p>
    </div>
    <div class="input-card" style="width:16rem">
        <h4>地图缩放相关事件</h4>
        <div>
            <div class="input-item">
                <button id="zoomOn" class="btn" style="margin-right:1rem;">绑定事件</button>
                <button id="zoomOff" class="btn">解绑事件</button>
            </div>
        </div>
    </div>
    <div id="tip"></div>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script type="text/javascript">
        //初始化地图对象，加载地图
        var map = new AMap.Map("container", {
            resizeEnable: true
        });
        var startIcon
        var markerDOM
        var markArr=[]

        function buildICon(zoom) {
            if(markArr.length>0){
                map.remove(markArr);
            }
            console.log('zoom',zoom);
            
            let sizeNum = zoom ?Number(zoom)/2*8 : 25
            console.log(Math.floor(25/Number(zoom))*25);
            
            console.log('sizeNum',sizeNum);

            // 创建一个 Icon
            startIcon = new AMap.Icon({
                // 图标尺寸

                size: new AMap.Size(sizeNum, sizeNum),
                // 图标的取图地址
                image: 'https://avatar.csdnimg.cn/C/C/6/4_znforlife.jpg',
                // 图标所用图片大小
                imageSize: new window.AMap.Size(sizeNum, sizeNum),
                // 图标取图偏移量
                // imageOffset: new window.AMap.Pixel(-30, -17)
            });
            markerDOM = new AMap.Marker({
                position: [117.043738, 30.506803],
                icon: startIcon
            });

            markArr.push(markerDOM)
          
            map.add(markerDOM)

            
            return startIcon
        }

        buildICon()
        map.setFitView()
        var logMapinfo = function () {
            var zoom = map.getZoom(); //获取当前地图级别
            buildICon(zoom)

            // map.setFitView();

            document.querySelector("#map-zoom").innerText = zoom;
        };
        // logMapinfo();
        map.on('zoomchange', mapZoom);

        // function mapZoomstart(){
        //     document.querySelector("#text").innerText = '缩放开始';
        // }
        function mapZoom() {
            logMapinfo();
            document.querySelector("#text").innerText = '正在缩放';
        }
    // function mapZoomend(){
    //     document.querySelector("#text").innerText = '缩放结束';
    // }

    // // 事件绑定
    // function zoomOn(){
    //     log.success("绑定事件!");  
    //     map.on('zoomstart', mapZoomstart);
    //     map.on('zoomchange', mapZoom);
    //     map.on('zoomend', mapZoomend);
    // }
    // // 解绑事件
    // function zoomOff(){
    //     log.success("解除事件绑定!"); 
    //     map.off('zoomstart', mapZoomstart);
    //     map.off('zoomchange', mapZoom);
    //     map.off('zoomend', mapZoomend);
    // }

    // // 给按钮绑定事件
    // document.getElementById("zoomOn").onclick = zoomOn;
    // document.getElementById("zoomOff").onclick = zoomOff;


    </script>
</body>

</html>