百度地图API试用--(初次尝试)

2016-03-17:
　　百度地图API申请key的步骤相对简单，不做过多阐述。
　　初次使用百度地图API感觉有点神奇，有些功能加进来以后有点问题，注释掉等有空再解决。
　　代码如下：
  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <!DOCTYPE html>
  3 <html>
  4 <head>
  5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  7 
  8 <style type="text/css">
  9 body,html {
 10     width: 100%;
 11     height: 100%;
 12     margin: 0;
 13     font-family: "微软雅黑";
 14 }
 15 
 16 #allmap {
 17     width: 100%;
 18     height: 100%;
 19 }
 20 
 21 p {
 22     margin-left: 5px;
 23     font-size: 14px;
 24 }
 25 
 26 #result {
 27     width: 100%;
 28     font-size: 12px;
 29 }
 30 
 31 dl,dt,dd,ul,li {
 32     margin: 0;
 33     padding: 0;
 34     list-style: none;
 35 }
 36 
 37 dt {
 38     font-size: 14px;
 39     font-family: "微软雅黑";
 40     font-weight: bold;
 41     border-bottom: 1px dotted #000;
 42     padding: 5px 0 5px 5px;
 43     margin: 5px 0;
 44 }
 45 
 46 dd {
 47     padding: 5px 0 0 5px;
 48 }
 49 
 50 li {
 51     line-height: 28px;
 52 }
 53 
 54 #l-map {
 55     height: 300px;
 56     width: 100%;
 57 }
 58 
 59 #r-result {
 60     width: 100%;
 61 }
 62 </style>
 63 
 64 <script type="text/javascript"
 65     src="http://api.map.baidu.com/api?v=2.0&ak=你的API密匙"></script>        //密匙申请步骤比较容易，所以不做过多解释~加密后：aUQyZ3d0R2ZvMXA5OGxQZW5pZFV5eDho
 66 <script type="text/javascript" 
 67     src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
 68 <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
 69 <script type="text/javascript" 
 70     src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
 71 <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
 72 
 73 <title>宝宝的地图</title>
 74 </head>
 75 <body>
 76     <div id="allmap"></div>
 77     <div id="l-map"></div>
 78     <div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="150px;" /></div>
 79     <div id="searchResultPanel" style="border:1px solid #C0C0C0;150px;height:auto; display:none;"></div>
 80 </body>
 81 </html>
 82 
 83 <!-- 异步加载 -->
 84 <script type="text/javascript">
 85     //百度地图API功能
 86     function loadJScript() {
 87         var script = document.createElement("script");
 88         script.type = "text/javascript";
 89         script.src = "http://api.map.baidu.com/api?v=2.0&ak=iD2gwtGfo1p98lPenidUyx8h&callback=init";
 90         document.body.appendChild(script);
 91     }
 92     window.onload = loadJScript;  //异步加载地图
 93     alert("异步成功开启"); 
 94 </script>
 95 
 96 <!-- 导航控件-->
 97 <script type="text/javascript">
 98     // 百度地图API功能            
 99     var map = new BMap.Map("allmap");
100     map.centerAndZoom(new BMap.Point(113.275, 23.117), 11);
101     map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
102     map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
103     
104     // 添加带有定位的导航控件
105     var navigationControl = new BMap.NavigationControl({
106         // 靠左上角位置
107         anchor : BMAP_ANCHOR_TOP_LEFT,
108         // LARGE类型
109         type : BMAP_NAVIGATION_CONTROL_LARGE,
110         // 启用显示定位
111         enableGeolocation : true
112     });
113     map.addControl(navigationControl);
114     // 添加定位控件
115     var geolocationControl = new BMap.GeolocationControl();
116     geolocationControl.addEventListener("locationSuccess", function(e) {
117         // 定位成功事件
118         var address = '';
119         address += e.addressComponent.province;
120         address += e.addressComponent.city;
121         address += e.addressComponent.district;
122         address += e.addressComponent.street;
123         address += e.addressComponent.streetNumber;
124         //alert("当前定位地址为：" + address);
125     });
126     geolocationControl.addEventListener("locationError", function(e) {
127         // 定位失败事件
128         alert(e.message);
129     });
130     map.addControl(geolocationControl);
131     
132     alert("导航控件开启"); 
133 </script>
134 
135 <!-- 城市选择栏-->
136 <script type="text/javascript">
137     map.enableInertialDragging();
138     var size = new BMap.Size(10, 20);
139     map.addControl(new BMap.CityListControl({
140         anchor : BMAP_ANCHOR_TOP_RIGHT,
141         offset : size,
142     
143     }));
144     
145     var city = document.getElementById("cityName").value;
146     if(city != ""){
147         map.centerAndZoom(city,11);      // 用城市名设置地图中心点
148     }
149     alert("城市选择栏控件开启"); 
150 </script>
151 
152 <!-- 路况面板-->
153 <script type="text/javascript">
154     // 百度地图API功能
155     var ctrl = new BMapLib.TrafficControl({
156         showPanel: false //是否显示路况提示面板
157     });      
158     map.addControl(ctrl);
159     ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT); 
160     alert("路况控件开启"); 
161 </script>
162 
163 <!-- 点击获取坐标 -->
164 <script type="text/javascript">
165     /*map.addEventListener("click",function(e){
166         alert(e.point.lng + "," + e.point.lat);
167     });*/
168 </script>
169 
170 <!-- 检索控件-->
171 <script type="text/javascript">
172     
173     //检索地图 
174     map.centerAndZoom(poi, 16);
175     map.enableScrollWheelZoom();
176     var content = " "+" "+" "+" ";
177     //创建检索信息窗口对象
178     var searchInfoWindow = null;
179     var marker;
180     marker.enableDragging(); //marker可拖拽
181     map.addOverlay(marker); //在地图中添加marker
182     //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
183     alert("检索控件开启");
184     
185 </script>
186 
187 <!-- 右键菜单控件-->
188 <script type="text/javascript">
189     /*
190     var map = new BMap.Map("allmap");
191     var point = new BMap.Point(113.275, 23.117);
192     map.centerAndZoom(point,15);
193     var menu = new BMap.ContextMenu();
194     var txtMenuItem = [
195         {
196             text:'放大',
197             callback:function(){map.zoomIn();}
198         },
199         {
200             text:'缩小',
201             callback:function(){map.zoomOut();}
202         }
203     ];
204     for(var i=0; i < txtMenuItem.length; i++){
205         menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
206     }
207     map.addContextMenu(menu);
208     */
209 </script>
210 
211 <!-- 右键菜单删除标注控件-->
212 <script type="text/javascript">
213     /*
214     var removeMarker = function(e,ee,marker)
215     {
216         map.removeOverlay(marker);
217     }
218     
219     //创建右键菜单
220     var markerMenu=new BMap.ContextMenu();
221     markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));
222     var marker = new BMap.Marker(poi);
223     map.addOverlay(marker);
224     marker.addContextMenu(markerMenu);
225     */
226 </script>
227 
228 <!-- 智能搜索控件-->
229 <script type="text/javascript">
230     /*// 百度地图API功能
231     function G(id) {
232         return document.getElementById(id);
233     }
234 
235     //var map = new BMap.Map("allmap");
236     //map.centerAndZoom(new BMap.Point(113.275, 23.117),11);                   // 初始化地图,设置城市和地图级别。
237 
238     var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
239         {"input" : "suggestId"
240         ,"location" : map
241     });
242 
243     ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
244     var str = "";
245         var _value = e.fromitem.value;
246         var value = "";
247         if (e.fromitem.index > -1) {
248             value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
249         }    
250         str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
251         
252         value = "";
253         if (e.toitem.index > -1) {
254             _value = e.toitem.value;
255             value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
256         }    
257         str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
258         G("searchResultPanel").innerHTML = str;
259     });
260 
261     var myValue;
262     ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
263     var _value = e.item.value;
264         myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
265         G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
266         
267         setPlace();
268     });
269 
270     function setPlace(){
271         map.clearOverlays();    //清除地图上所有覆盖物
272         function myFun(){
273             var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
274             map.centerAndZoom(pp, 18);
275             map.addOverlay(new BMap.Marker(pp));    //添加标注
276         }
277         var local = new BMap.LocalSearch(map, { //智能搜索
278           onSearchComplete: myFun
279         });
280         local.search(myValue);
281     }*/
282 </script>
相关阅读:
分享图片到在线服务
 获取和保存照片
 处理图片（updated）
简化版“询问用户是否退出”
捕获高像素照片（updated）
处理高像素的照片
 加强版照片捕获
 图片拍摄、处理、镜头应用
 Windows Phone 推送通知的第四类推送
 网络通信
原文地址：https://www.cnblogs.com/LeoSunhailin/p/5289774.html