代码改变世界

创建百度地图实例

2016-12-07 17:11  bongxin  阅读(1181)  评论(0)    收藏  举报 
 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="width: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+" &nbsp;纬度坐标："+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>