ty/html2.html at master · stillywud/ty · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#allmap{width:100%;height:500px;}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=nSxiPohfziUaCuONe4ViUP2N"></script>
    <title>从多个点删除指定点</title>
    <link href="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">
    <script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
</head>
<body>
    <ul class = "drawing-panel">
        <li class="bmap-btn bmap-marker" id="marker" onclick="draw(this)"></li>
        <li class="bmap-btn bmap-polyline" id="polyline" onclick="draw(this)"></li>
        <li class="bmap-btn bmap-rectangle" id="rectangle" onclick="draw(this)"></li>
        <li class="bmap-btn bmap-polygon" id="polygon" onclick="draw(this)"></li>
        <li class="bmap-btn bmap-circle" id="circle" onclick="draw(this)">222</li>
    </ul>
	<div id="allmap"></div>
	<input type="button" onclick="deletePoint()" value="删除id=1"/>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMapGL.Map("allmap");
	var point = new BMapGL.Point(116.404, 39.915);
	map.centerAndZoom(point, 15);
	// map.disableDoubleClickZoom(true);

	// 编写自定义函数,创建标注
	function addMarker(point,label){
		var marker = new BMapGL.Marker(point);
		map.addOverlay(marker);
		marker.setLabel(label);
	}
	// 随机向地图添加25个标注
	var bounds = map.getBounds();
	var sw = bounds.getSouthWest();
	var ne = bounds.getNorthEast();
	var lngSpan = Math.abs(sw.lng - ne.lng);
	var latSpan = Math.abs(ne.lat - sw.lat);
	for (var i = 0; i < 10; i++) {
		var point = new BMapGL.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
		var label = new BMapGL.Label("我是id="+i,{offset:new BMapGL.Size(20,-10)});
		addMarker(point,label);
	}

    console.log(map.getOverlays())

	function deletePoint(){
		var allOverlay = map.getOverlays();
		for (var i = 0; i < allOverlay.length -1; i++){
			if(allOverlay[i].getLabel().content == "我是id=1"){
				map.removeOverlay(allOverlay[i]);
				return false;
			}
		}
	}

    var styleOptions = {
        strokeColor: '#5E87DB',   // 边线颜色
        fillColor: '#5E87DB',     // 填充颜色。当参数为空时，圆形没有填充颜色
        strokeWeight: 2,          // 边线宽度，以像素为单位
        strokeOpacity: 1,         // 边线透明度，取值范围0-1
        fillOpacity: 0.2          // 填充透明度，取值范围0-1
    };
    var labelOptions = {
        borderRadius: '2px',
        background: '#FFFBCC',
        border: '1px solid #E1E1E1',
        color: '#703A04',
        fontSize: '12px',
        letterSpacing: '0',
        padding: '5px'
    };

    // 实例化鼠标绘制工具
    var drawingManager = new BMapGLLib.DrawingManager(map, {
        // isOpen: true,        // 是否开启绘制模式
        enableCalculate: false, // 绘制是否进行测距测面
        enableSorption: true,   // 是否开启边界吸附功能
        sorptiondistance: 20,   // 边界吸附距离
        circleOptions: styleOptions,     // 圆的样式
        polylineOptions: styleOptions,   // 线的样式
        polygonOptions: styleOptions,    // 多边形的样式
        rectangleOptions: styleOptions,  // 矩形的样式
        labelOptions: labelOptions,      // label样式
    });

    function draw(e) {
        var arr = document.getElementsByClassName('bmap-btn');
        for(var i = 0; i<arr.length; i++) {
            arr[i].style.backgroundPositionY = '0';
        }
        e.style.backgroundPositionY = '-52px';
        switch(e.id) {
            case 'marker': {
                var drawingType = BMAP_DRAWING_MARKER;
                break;
            }
            case 'polyline': {
                var drawingType = BMAP_DRAWING_POLYLINE;
                break;
            }
            case 'rectangle': {
                var drawingType = BMAP_DRAWING_RECTANGLE;
                break;
            }
            case 'polygon': {
                var drawingType = BMAP_DRAWING_POLYGON;
                break;
            }
            case 'circle': {
                var drawingType = BMAP_DRAWING_CIRCLE;
                break;
            }
        }
        // 进行绘制
        if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) {
            drawingManager.close();


        } else {
            drawingManager.setDrawingMode(drawingType);
            drawingManager.open();
        }
    };
</script>