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)初始化时
(2)点击删除按钮