HTML5 与百度地图开发

原文地址：http://write.blog.csdn.net/postedit

1.navigator.geolocation HTML5的方式获取GPS坐标

2.将坐标信息转换为百度地图的坐标系

3.将转换得到的坐标展示在地图上

引入js库

<scriptsrc="${common_root}/resource/mobile/js/jquery-1.8.3.min.js"type="text/javascript"></script>

<scriptsrc="http://api.map.baidu.com/api?type=quick&ak=30GO2mPNaVL8smpTkkNQroIw&v=1.0"type="text/javascript"></script>

                   

                     varwinHeight= $(window).height();

                     $("#container").css("height",winHeight/4);

                     

                     varx = 116.404;

                     vary = 39.915;

                     varpoint;

                     varmap;

                     //通过调用后台的接口将GPS坐标系转化为百度地图的坐标系

                     vargpsToBaiduPoint =function(){

                           varurl="/mobile/outsign/gpsToBaiduPoint.htm";    

                           $.ajax({

                            type:"POST",

                            async:false,

                            cache:false,

                            url: url,

                            data:"x="+x+"&y="+y,

                            success:function(data){                     

                                         x = data.x;

                                         y = data.y;

                                         //显示地图

                                         showMap();

                            }

                          });

                     };

                     

                     varshowMap =function(){

                           map =newBMap.Map("container");// 创建地图实例

                           point =newBMap.Point(x, y); // 创建点坐标 

                           map.centerAndZoom(point, 15);     // 初始化地图，设置中心点坐标和地图级别 

                           

                           varmarker =newBMap.Marker(point);       // 创建标注   

                map.addOverlay(marker);  

               

               varmyGeo =newBMap.Geocoder();     

                           // 根据坐标得到地址描述   

                           myGeo.getLocation(point,function(result){     

                varaddress ="未知";

                if(result){     

                     address = result.address;    

                 }    

                  showWin(address);

                  setPositionVal(x,y,address);

                        });

                            

                     }

                     

                     varsetPositionVal =function(x,y,address){

                           $("#pointX").val(x);

                           $("#pointY").val(y);

                           $("#address").val(address);

                     }

                     

                     varshowWin =function(address){

                           varopts = {   

                            width : 200,    // 信息窗口宽度   

                            height: 40,    // 信息窗口高度   

                            title :"当前位置" // 信息窗口标题  

                           };

                           varinfoWindow =newBMap.InfoWindow(address,opts); // 创建信息窗口对象   

                           map.openInfoWindow(infoWindow,point);     // 打开信息窗口

                     }

                     

                     /*var translateCallback = function (point){

                         x = point.lat;

                         y = point.lng;

                         showMap();

                         //alert("转化为百度坐标为："+point.lng + "," + point.lat);

                     }*/

                     

                     varsetPosition =function(position){

                           x = position.coords.longitude;

                            y = position.coords.latitude;

                            gpsToBaiduPoint();   

                     };

                     

                     vargetLocation =function(){

                      if(navigator.geolocation){

                              //通过HTML5 带的类库获取 GPS坐标     

                            navigator.geolocation.getCurrentPosition(setPosition);                                                            

                         }else{

                            showMap();

                         }

                      };

                     

                     //获取当前坐标

                     getLocation();

后台java代码

@RequestMapping("/mobile/outsign/gpsToBaiduPoint.htm")

       @ResponseBody

       publicJSONObject gpsToBaiduPoint(String x,String y){

              JSONObject baiduPoint = GEOUtil.gpsTobaiduCoordinate(x,y);

              returnbaiduPoint;

       }

工具类GEOUtil里面的方法 将GPS坐标系转换为百度地图坐标系  

       publicstaticJSONObjectgpsTobaiduCoordinate (String latitude,

                     String longitude) {        

              finalString uri ="http://api.map.baidu.com/ag/coord/convert?from=2&to=4&x="+latitude+"&y="+longitude;            

           String result = HttpClientUtil.getResult(uri);

          if(StringUtils.isNotEmpty(result)&&"[".equals(result.substring(0, 1))&&"]".equals(result.substring(result.length()-1))){

              result = result.substring(1,result.length()-1);

           }

           String x = latitude;

           String y = longitude;

           JSONObject map = JSON.parseObject(result);

          interror = map.getInteger("error");

          if(error == 0){

                   x =decodebase64(map.getString("x"));

                   y =decodebase64(map.getString("y"));

           }

           System.out.println("x:"+x+"y:"+y);

           map.put("x", x);

           map.put("y", y);

          returnmap;

       }

       

       privatestaticString decodebase64(String base64){     

              byte[] dataArray = Base64.decode(base64);

              returnnewString(dataArray);

       }