forked from triplestudio/helloworld
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbaidu_map_demo.html
133 lines (114 loc) · 4.72 KB
/
baidu_map_demo.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
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
133
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图应用示例</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form method="post" id="form1">
<div id="allmap" style="width:800px; height:600px; border:solid 1px gray; margin:0 auto;">
</div>
</form>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=s1eeiQEfDF0WZfdfvLgHbG2Ru49UNCrn"></script>
<script type="text/javascript">
// 百度地图 API 功能对象
var map = null;
if (BMap) {
map = new BMap.Map("allmap"); // id=allmap 的容器内显示
map.enableScrollWheelZoom();
}
/**
* 指定经纬度，图标，标注文本
* 在地图上添加标注
* longitude 经度
* latitude 纬度
* icon 图标
* text 标注文本
**/
function addMarker(longitude, latitude, icon, text) {
if (!map) return;
var point = new BMap.Point(longitude, latitude);
var myIcon = new BMap.Icon(icon + ".png", new BMap.Size(32, 32));
// 指定位置及标注的图标
var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
if(text){
var label = new BMap.Label(text, { offset: new BMap.Size(32, -16) });
marker.setLabel(label);
}
// 添加到地图上
map.addOverlay(marker);
}
/**
* 指定起止经纬度，绘制连接线
*
* longitudeFrom 经度
* latitudeFrom 纬度
* longitudeTo 经度
* latitudeTo 纬度
**/
function addLine(longitudeFrom, latitudeFrom, longitudeTo, latitudeTo) {
if (!map) return;
var pointFrom = new BMap.Point(longitudeFrom, latitudeFrom);
var pointTo = new BMap.Point(longitudeTo, latitudeTo);
// 可以指定多点连接，此处只考虑两点
var line = new BMap.Polyline([pointFrom, pointTo], { strokeWeight:1, strokeOpacity:0.5, strokeColor:"red" });
// 添加到地图上
map.addOverlay(line);
}
/**
* 添加图例
* 实质就是在地图上添加自己的页面元素
*
* html 网页元素
**/
function addLegend(html){
var LegendControl = function () {
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
LegendControl.prototype = new BMap.Control();
LegendControl.prototype.initialize = function (map) {
var le = $(html)[0];
map.getContainer().appendChild(le);
return le;
};
var legendCtrl = new LegendControl();
map.addControl(legendCtrl);
}
</script>
<script type="text/javascript">
// 机器类：经度，纬度，名称
function Machine(longitude, latitude, name){
this.longitude = longitude;
this.latitude = latitude;
this.name = name;
}
// 确定地图的中心位置与缩放级别
var center = new BMap.Point(110.423997,31.40979);
map.centerAndZoom(center, 6); // 级别 6，跨省视图
// 添加图例，自由写 html
addLegend("<div style='font-size:12px; color:gray; width:140px; padding:5px; background:white; text-align:center; border:solid 1px gray;'>总部：<img src='head.png' style='width:16px; vertical-align:middle;' /> 设备：<img src='machine.png' style='width:16px; vertical-align:middle;' /></div>");
// 总部位置
var head = { longitude : 112.918702343957, latitude : 28.30070516 };
addMarker(head.longitude, head.latitude, 'head', '总部');
// 所有机器位置
var machineList = [
new Machine(114.876143,38.113315,'石家庄'),
new Machine(112.521289,37.822014,'太原'),
new Machine(108.989008,34.328175,'西安'),
new Machine(117.230997,31.881961,'合肥'),
new Machine(103.984944,30.553819,'成都'),
new Machine(108.400295,22.862517,'南宁'),
new Machine(113.257181,23.169067,'广州'),
new Machine(120.174565,30.298715,'杭州'),
new Machine(102.881106,24.959705,'昆明')
];
// 添加所有机器并连线
for(var i=0; i<machineList.length; i++){
addMarker(machineList[i].longitude, machineList[i].latitude, 'machine', machineList[i].name);
addLine(head.longitude, head.latitude, machineList[i].longitude, machineList[i].latitude);
}
</script>
</body>
</html>