1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>Hello, World</title>
7 <style type="text/css">
8 html{height:100%}
9 body{height:100%;margin:0px;padding:0px}
10 #container{height:100%}
11 </style>
12 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=4fc8775c60deb54f74fe5b432ce36345"></script>
13 <script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
14 <script type='text/javascript' src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
15 </head>
16
17 <body>
18 <div style="margin:0 auto;width:60%">
19 移动标注定位酒店地址坐标：<input type='text' readonly id='info'>
20 <input type='button' value='保存'><input type='button' value='关闭窗口' onclick='javascript:window.close();'>
21 </div>
22 <!-- 测距工具
23 <input type="button" value="开启" onclick="myDis.open()" />
24 <input type="button" value="关闭" onclick="myDis.close()" />
25 -->
26
27 <div id="container"></div>
28 <script type="text/javascript">
29 var map = new BMap.Map("container");
30 var point = new BMap.Point(120.09800, 30.29300);//地图中心点默认为杭州西湖区
31 map.centerAndZoom(point, 11); //数字15代表地图显示级别1-20
32 map.enableScrollWheelZoom(); //滚动轮缩放
33
34 /*
35 //本地搜索
36 var local = new BMap.LocalSearch(map, {
37 renderOptions:{map: map}
38 });
39 //local.search("蒋村公交中心站");
40 local.search("温州火车站");
41 */
42
43 /*
44 //信息窗口
45 var opts = {
46 width: 250, // 信息窗口宽度
47 height: 100, // 信息窗口高度
48 title: "Hello" // 信息窗口标题
49 }
50 var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
51 map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
52 */
53
54 var marker = new BMap.Marker(point); // 创建标注
55 map.addOverlay(marker); // 将标注添加到地图中
56
57 marker.addEventListener("click", function(){
58 alert("您点击了标注");
59 });
60
61 //拖动标注
62 marker.enableDragging();
63 marker.addEventListener("dragend", function(e){
64 alert("酒店地址坐标为：" + e.point.lng + "," + e.point.lat);
65 document.getElementById("info").value = e.point.lng + "," + e.point.lat;
66 })
67
68
69 //控件
70 //map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
71 var opts = {type: BMAP_NAVIGATION_CONTROL_LARGE}
72 map.addControl(new BMap.NavigationControl(opts));//缩放控件
73 map.addControl(new BMap.ScaleControl());//比例尺控件
74 map.addControl(new BMap.OverviewMapControl(3));//鹰眼控件
75 map.addControl(new BMap.MapTypeControl());//地图卫星图切换
76 //map.setCurrentCity("杭州"); // 官方说仅当设置城市信息时，MapTypeControl的切换功能才能可用.三维有问题
77
78 //通过按钮开启关闭测距工具
79 //通过onclick='myDis.open()'和onclick='myDis.close()'开启关闭
80 var myDis = new BMapLib.DistanceTool(map);
81
82 //向地图添加工具
83 var myPushpin = new BMap.PushpinTool(map); // 创建标注工具实例
84 myPushpin.addEventListener("markend", function(e){ // 监听事件，提示标注点坐标信息
85 alert("您标注的位置：" + e.marker.getPoint().lng + ", " + e.marker.getPoint().lat);
86 });
87 myPushpin.open(); // 开启标注工具
88
89
90 /*
91 //点击事件监听
92 map.addEventListener("click", function(e){
93 alert(e.point.lng + ", " + e.point.lat);
94 document.getElementById("info").innerHTML = e.point.lng + ", " + e.point.lat;
95 });
96 */
97
98 /*
99 //拖动地图
100 map.addEventListener("dragend", function(){
101 var center = map.getCenter();
102 alert("地图中心点变更为：" + center.lng + ", " + center.lat);
103 });
104 */
105
106 /*
107 //第一次点击后移除监听
108 function showInfo(e){
109 alert(e.point.lng + ", " + e.point.lat);
110 map.removeEventListener("click", showInfo);
111 }
112 map.addEventListener("click", showInfo);
113 */
114
115 //创建交通图层
116 /*
117 var traffic = new BMap.TrafficLayer(); // 创建交通流量图层实例
118 map.addTileLayer(traffic); // 将图层添加到地图上
119 //map.removeTileLayer(traffic); // 将图层移除
120 */
121
122 //折线
123 /*
124 var polyline = new BMap.Polyline([
125 new BMap.Point(116.399, 39.910),
126 new BMap.Point(116.805, 39.920)
127 ],
128 {strokeColor:"red", strokeWeight:6, strokeOpacity:0.5}
129 );
130 map.addOverlay(polyline);
131 */
132 </script>
133 </body>
134 </html>
