高德地图-删除多个点标记

绝地灬酷狼 2022-07-15 05:25 405阅读 0赞

1、问题背景

高德地图上有自己创建的marker，单击删除按钮，可以删除多个标记

2、实现源码

<!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="http://cache.amap.com/lbs/static/main1119.css"/>
    	    <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
    	    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    	</head>
    	<body>
    		<div id="container"></div>
    		<div class="button-group">
    		    <input type="button" class="button" value="删除" id="delMarker"/>
    		</div>
    		<script>
    		    var map = new AMap.Map("container", {
    		        resizeEnable: true,
    		        center: [114.20495,30.407079],
    		        zoom: 14
    		    });
    		    
    		    AMap.event.addDomListener(document.getElementById('delMarker'), 'click', function() {
    		        map.remove(markers);
    		    }, false);
    		
    		    var markers = [], 
    		        positions = [
    		            [114.195423,30.405821], 
    		            [114.203662,30.404636], 
    		            [114.220828,30.404784], 
    		            [114.222202,30.393976], 
    		            [114.201431,30.392051],
    		            [114.193448,30.413149],
    		            [114.220657,30.414777],
    		            [114.205379,30.414629],
    		            [114.202976,30.398492],
    		            [114.208812,30.400121]
    		        ];
    		    for(var i = 0, marker; i < positions.length; i++)
    		    {
    		        marker = new AMap.Marker({
    		            map: map,
    		            position: positions[i]
    		        });
    		        markers.push(marker);
    		    }
    		</script>
    	</body>
    </html>

3、实现结果

（1）初始化时

![Image 1][]

（2）点击删除按钮

![Image 1][]

[Image 1]: