-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
65 lines (64 loc) · 1.96 KB
/
index.html
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
<!DOCTYPE html>
<html style="width:100%;height:100%">
<head>
<meta charset="UTF-8">
<title>地图组件</title>
<style>
body{width:100%;height:100%;margin:0;font-size:20px;font-family:arial;}
#map{width:100%;height:100%;}
.zoom{position:absolute;left:20px;width:40px;height:40px;line-height:40px;background-color:rgba(0,147,253,0.5);border-radius: 50%;text-align: center;color:#fff;cursor:pointer;font-weight:900;}
#zoomin{bottom:90px;}
#zoomout{bottom:30px;}
</style>
</head>
<body>
<div id="map"></div>
<div id="zoomin" class="zoom" onselectstart="return false">+</div>
<div id="zoomout" class="zoom" onselectstart="return false">-</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=18918f6f3ebeba5c3c29e2c144224311"></script>
<script type="text/javascript">
(function(){
var map =new AMap.Map('map');
map.setCity('杭州市');
map.setZoom(10);
document.getElementById('zoomin').onclick=function(){
map.zoomIn();
}
document.getElementById('zoomout').onclick=function(){
map.zoomOut();
}
// 地图插件
// 比例尺插件
map.plugin(['AMap.Scale'],function(){
var scale = new AMap.Scale();
map.addControl(scale);
});
// 鹰眼插件
map.plugin(["AMap.OverView"],function(){
view = new AMap.OverView();
view.open();
map.addControl(view);
});
// 地图类型切换
map.plugin(['AMap.MapType'],function(){
var type=new AMap.MapType();
map.addControl(type);
});
// 鱼骨工具条
map.plugin(['AMap.ToolBar'],function(){
var tool=new AMap.ToolBar();
map.addControl(tool);
});
// map.plugin(['AMap.MouseTool'],function(){
// var mousetool=new AMap.MouseTool(map);
// mousetool.measure();
// });
// 测距
map.plugin(['AMap.RangingTool'],function(){
var ruler=new AMap.RangingTool(map);
ruler.turnOn();
});
})();
</script>
</body>
</html>