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;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 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>