1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>Simple Map</title> 6 <style type="text/css"> 7 body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} 8 p{margin-left:5px; font-size:14px;} 9 </style> 10 <script type="text/javascript" src="http://api.map.baidu.com/api?ak=f3SnqSzsbeIw9M9ob1U8R5Rb&v=4.0&services=false"></script> 11 </head> 12 <body> 13 <div id="content" class="content"> 14 <input type="text" value="" id="keyword" /> 15 <input type="button" name="" id="" value="查询" onclick="search()" /> 16 <div style="600px;height:500px;border:0px solid gray" id="container"></div> 17 <p id="aa"></p> 18 <script type="text/javascript"> 19 //创建Map实例 20 var map = new BMap.Map("container"); 21 var point = new BMap.Point(113.416982,23.178147); 22 map.centerAndZoom(point,18); 23 //添加鼠标滚动缩放 24 map.enableScrollWheelZoom(); 25 //添加缩略图控件 26 map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT})); 27 //添加缩放平移控件 28 map.addControl(new BMap.NavigationControl()); 29 //添加比例尺控件 30 map.addControl(new BMap.ScaleControl()); 31 //添加地图类型控件 32 map.addControl(new BMap.MapTypeControl()); 33 34 //设置标注的图标 35 var icon = new BMap.Icon("img/icon.jpg",new BMap.Size(100,100)); 36 //设置标注的经纬度 37 var marker = new BMap.Marker(new BMap.Point(113.416982,23.178147),{icon:icon}); 38 //把标注添加到地图上 39 map.addOverlay(marker); 40 var content = "<table>"; 41 content = content + "<tr><td> 编号：001</td></tr>"; 42 content = content + "<tr><td> 地点：广州</td></tr>"; 43 content = content + "<tr><td> 时间：2016-12-07</td></tr>"; 44 content += "</table>"; 45 var infowindow = new BMap.InfoWindow(content); 46 marker.addEventListener("click",function(){ 47 this.openInfoWindow(infowindow); 48 }); 49 50 //点击地图，获取经纬度坐标 51 map.addEventListener("click",function(e){ 52 document.getElementById("aa").innerHTML = "经度坐标："+e.point.lng+" 纬度坐标："+e.point.lat; 53 }); 54 55 //关键字搜索 56 function search(){ 57 var keyword = document.getElementById("keyword").value; 58 var local = new BMap.LocalSearch(map, { 59 renderOptions:{map: map} 60 }); 61 local.search(keyword); 62 } 63 </script> 64 65 </div> 66 </body> 67 </html>