-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathmap-demo.html
More file actions
58 lines (58 loc) · 2.22 KB
/
map-demo.html
File metadata and controls
58 lines (58 loc) · 2.22 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>baidu map demo</title>
<link rel="stylesheet" href="assets/style/base.css">
</head>
<body>
<div class="main-wrap">
<div class="header">baidu map demo</div>
<div class="card">
<div class="card-header">map basic</div>
<div class="card-content">
<div id="map" style="max-width：580px; width: 100%; height: 400px;"></div>
<div id="r-result"></div>
</div>
</div>
</div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=XTdughui8fmfqXvhFOlRVWhv"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script>
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.417854,39.921988), 15);
var data_info = [[116.417854,39.921988,"地址：北京市东城区王府井大街88号乐天银泰百货八层"],
[116.406605,39.921585,"地址：北京市东城区东华门大街"],
[116.412222,39.912345,"地址：北京市东城区正义路甲5号"]
];
var opts = {
width : 250, // 信息窗口宽度
height: 80, // 信息窗口高度
title : "信息窗口" , // 信息窗口标题
enableMessage:true//设置允许信息窗发送短息
};
for(var i=0;i<data_info.length;i++){
var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1])); // 创建标注
var content = data_info[i][2];
map.addOverlay(marker); // 将标注添加到地图中
addClickHandler(content,marker);
}
function addClickHandler(content,marker){
marker.addEventListener("click",function(e){
openInfo(content,e)}
);
}
function openInfo(content,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
}
$().ready(function(){
// $('.BMap_Marker:first').trigger('click');
map.openInfoWindow(new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层",opts),new BMap.Point(116.417854,39.921988))
})
</script>
</body>
</html>