转载：http://www.blogjava.net/hyljava/archive/2012/07/23/383769.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 |
<!DOCTYPE html> <html> <head> <meta name="viewport"
content="initial-scale=1.0, user-scalable=no"
/> <meta http-equiv="Content-Type"
content="text/html; charset=GBK"
/> <title>Hello, World</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:70%}#container{width:50%} </style> </head> <body> <br><br><br><br><br>百度地图接口 -- 总结<br><br><div id="container"></div> <script type="text/javascript"> var
map = new
BMap.Map("container"); // 创建地图实例 //通过经纬度坐标来初始化地图var
point = new
BMap.Point(125.4360909,43.78802888999); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别 //通过城市名称来初始化地图//map.centerAndZoom("长春");var
marker = new
BMap.Marker(point); // 创建标注 map.addOverlay(marker); map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放 map.enableKeyboard(); // 开启键盘控制 map.enableContinuousZoom(); // 开启连续缩放效果 map.enableInertialDragging(); // 开启惯性拖拽效果map.addControl(new
BMap.NavigationControl()); //添加标准地图控件(左上角的放大缩小左右拖拽控件)map.addControl(new
BMap.ScaleControl()); //添加比例尺控件(左下角显示的比例尺控件)map.addControl(new
BMap.OverviewMapControl()); // 缩略图控件map.addControl(new
BMap.MapTypeControl()); //// 仅当设置城市信息时，MapTypeControl的切换功能才能可用map.setCurrentCity("北京"); map.setCurrentCity("吉林省");//添加自定义控件// 定义一个控件类，即function function
ZoomControl(){ // 设置默认停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; this.defaultOffset = new
BMap.Size(50, 10); } // 通过JavaScript的prototype属性继承于BMap.Control ZoomControl.prototype = new
BMap.Control(); // 自定义控件必须实现initialize方法，并且将控件的DOM元素返回 // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中 ZoomControl.prototype.initialize = function(map){ // 创建一个DOM元素 var
div = document.createElement("div"); // 添加文字说明 div.appendChild(document.createTextNode("长春工业大学人文信息学院")); // 设置样式 div.style.cursor = "pointer"; div.style.border = "1px solid gray"; div.style.backgroundColor = "white"; // 绑定事件，点击一次放大两级 div.onclick = function(e){ alert("长春工业大学人文信息学院"); } // 添加DOM元素到地图中 map.getContainer().appendChild(div); // 将DOM元素返回 return
div; } // 创建控件实例 var
myZoomCtrl = new
ZoomControl(); // 添加到地图当中 map.addControl(myZoomCtrl); //添加信息窗口var
opts = { width : 200, // 信息窗口宽度 height: 70, // 信息窗口高度 title : "长春工业大学人文信息学院"
// 信息窗口标题 } var
infoWindow = new
BMap.InfoWindow("您好，欢迎来到长春工业大学人文信息学院", opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口</script> </body> </html> |
运行效果图
---------- 百度地图资料-------------------------------------------------------------------
JavaScript 开源库：http://developer.baidu.com/map/library.htm
拾取坐标系统：http://api.map.baidu.com/lbsapi/getpoint/index.html
地图API示例(demo)：http://developer.baidu.com/map/jsdemo.htm
API开发指南：http://developer.baidu.com/map/jsdevelop-1.htm
原文：http://www.cnblogs.com/senyier/p/3621185.html