lianxi.html
4.6 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
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
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>聯繫我們</title>
<link rel="stylesheet" href="__TMPL__/public/assets/css/wbase.css">
<script src="__TMPL__/public/assets/js/base.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hG4FuySg0nLRGkY8pQZsGQVA8jCb81F3"></script>
<style>
.BMapLabel {
background: rgba(255, 255, 255, 1);
opacity: 0.8;
border-radius: 6px;
padding: 0.1rem !important;
box-sizing: border-box !important;
left: -0.13rem !important;
}
/* #map {
margin-top: 35px;
}
*/
.anchorBL {
display: none !important;
}
</style>
</head>
<body>
<!--header-->
<header class="header">
<img src="{:cmf_get_image_url($logo.image)}" alt="">
</header>
<!-- 内容 -->
<div class="con_box">
<h1>聯繫我們</h1>
<div style="width:100%;height:4.6rem;border:#ccc solid 1px;font-size:12px" id="map"></div>
<div class="con_txt">
<h2>澳德綜合健康中心有限公司</h2>
<p>地址 : 香港九龍灣臨澤街8號傲騰廣場25樓</p>
<p>電話 : (852) 2582 0188</p>
<p>傳真 : (852) 2582 0199</p>
<p>電郵 : info@medisun.hk</p>
</div>
</div>
</body>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$('.inpTxt').each(function() {
$(this).focus(function() {
$(this).parents("li").css('border-bottom', '1px solid #E29C6D')
});
});
$('.inpTxt').each(function() {
$(this).blur(function() {
$(this).parents("li").css('border-bottom', '1px solid rgba(230,230,230,1)')
});
});
//创建和初始化地图函数：
function initMap() {
createMap(); //创建地图
setMapEvent(); //设置地图事件
addMapControl(); //向地图添加控件
addMapOverlay(); //向地图添加覆盖物
}
function createMap() {
map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(114.180029, 22.336225), 15);
}
function setMapEvent() {
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
}
function addClickHandler(target, window) {
target.addEventListener("click", function() {
target.openInfoWindow(window);
});
}
function addMapOverlay() {
var markers = [{
// content: "我的备注",
title: "<p class=“map_p1”>澳德綜合健康中心有限公司</p><p class=“map_p2”>地址 : 香港九龍灣臨澤街8號傲騰廣場<br>25樓</p>",
imageOffset: {
width: -46,
height: -21
},
position: {
lat: 22.338928,
lng: 114.17832
}
}, ];
for (var index = 0; index < markers.length; index++) {
var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
var marker = new BMap.Marker(point, {
icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
})
});
var label = new BMap.Label(markers[index].title, {
offset: new BMap.Size(25, 5)
});
var opts = {
width: 200,
title: markers[index].title,
enableMessage: false
};
var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
marker.setLabel(label);
addClickHandler(marker, infoWindow);
map.addOverlay(marker);
};
var labels = [];
for (var index = 0; index < labels.length; index++) {
var opt = {
position: new BMap.Point(labels[index].position.lng, labels[index].position.lat)
};
var label = new BMap.Label(labels[index].content, opt);
map.addOverlay(label);
};
}
//向地图添加控件
function addMapControl() {
var navControl = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: 2
});
map.addControl(navControl);
}
var map;
initMap();
</script>
</html