HTML5 与百度地图开发

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

 

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

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

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

 

引入js库

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

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

 

                   

                     var winHeight= $(window).height();

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

                     

                      var x = 116.404;

                      var y = 39.915;

                      var point;

                      var map;

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

                     var gpsToBaiduPoint = function(){

                            var url="/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();

                            }

                          });

                     };

                     

                      var showMap =function(){

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

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

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

                           

                           var marker = new BMap.Marker(point);        // 创建标注   

                map.addOverlay(marker);  

               

                var myGeo = new BMap.Geocoder();     

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

                           myGeo.getLocation(point, function(result){     

                 var address = "未知" ;

                 if (result){     

                     address = result.address;    

                 }    

                  showWin(address);

                  setPositionVal(x,y,address);

                        });

                            

                      }

                     

                      var setPositionVal = function(x,y,address){

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

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

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

                      }

                     

                      var showWin = function(address){

                            var opts = {   

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

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

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

                           };

                            var infoWindow = new BMap.InfoWindow(address,opts);  // 创建信息窗口对象   

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

                      }

                     

                      /*var translateCallback = function (point){

                         x = point.lat;

                         y = point.lng;

                         showMap();

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

                     }*/

                     

                     var setPosition = function(position){

                           x = position.coords.longitude;

                            y = position.coords.latitude;

                            gpsToBaiduPoint();   

                     };

                     

                      var getLocation = function(){

                       if (navigator.geolocation){

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

                            navigator.geolocation.getCurrentPosition(setPosition);                                                            

                         } else{

                            showMap();

                         }

                      };

                     

                      //获取当前坐标

                     getLocation();

 

后台java代码

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

        @ResponseBody

        public JSONObject gpsToBaiduPoint(String x,String y){

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

               return baiduPoint;

       }

 

 

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

        public static JSONObject gpsTobaiduCoordinate (String latitude,

                     String longitude) {        

               final String 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);

           int error = 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);

           return map;

       }

       

        private static String decodebase64(String base64){     

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

               return new String(dataArray);

       }

--------------

spring mvc+tomcat源码分析视频 （复制链接在浏览器打开）

https://study.163.com/course/courseMain.htm?share=2&shareId=480000001919582&courseId=1209399899&_trace_c_p_k2_=6d81bc445e9c462ab8d6345e40f6b0bf