-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmap.html
95 lines (93 loc) · 3.6 KB
/
map.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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具"/>
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图"/>
<title>百度地图API自定义地图</title>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<!--引用百度地图API-->
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=oE4KuKzCYX27HFGxSXiYoMz1tnjQQXUj"></script>
</head>
<body>
<!--百度地图容器-->
<div style="width:100%;height:578px;font-size:12px" id="map"></div>
</body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap() {
createMap();//创建地图
setMapEvent();//设置地图事件
// addMapControl();//向地图添加控件
addMapOverlay();//向地图添加覆盖物
}
function createMap() {
map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(106.573185,29.642386), 17);
}
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: "重庆市江津区，联系电话：18290482082,18716447300",
title: "重庆靖峰餐饮服务有限公司",
imageOffset: {width: -46, height: -21},
position: {lng: 106.573185, lat: 29.642386 }
}
];
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);
}
;
}
//向地图添加控件
function addMapControl() {
// var scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
// scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
// map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(navControl);
var overviewControl = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true});
map.addControl(overviewControl);
}
var map;
initMap();
</script>
</html>