百度地图api示例 

  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>

 

posted @ 2013-06-07 17:22  jami918  阅读(555)  评论(0)    收藏  举报