百度地图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>

 

你可能感兴趣的:(百度地图)