• 百度地图js小结


    1、获取javascript API 服务方法,首先申请密钥(ak),才可成功载入APIJS文件。

    用法例如以下:

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

    假设须要限制区域,那么须要引入以下的js

    <!-- 区域限制js -->
    <script type="text/javascript" src="
    http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>

    2、设置样式,冲满全屏,弹出窗体的样式

    body, html,#l-map{ 100%;height: 100%;overflow: hidden;margin:0;}

    3、调用百度地图

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

    var point = new BMap.Point(111.818239, 41.386087);  //创建点坐标

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

    map.enableScrollWheelZoom();

    map.addControl(new BMap.NavigationControl());  //加入�默认缩放平移控件

     

    4、加入�缩放平移控件

    map.addControl(new BMap.NavigationControl());  //加入�默认缩放平移控件

    map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));  //右上角,仅包括平移和缩放button

    map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}));  //左下角,仅包括平移button

    map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));  //右下角,仅包括缩放button

    map.enableScrollWheelZoom();    //启用滚轮放大缩小,默认禁用

    map.enableContinuousZoom();    //启用地图惯性拖拽,默认禁用

    5、区域限制必须引入上面的区域限制js

    区域限制样例是仅仅显示北京市

    var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),

            new BMap.Point(116.832025, 40.126349));

     

    try { 

    BMapLib.AreaRestriction.setBounds(map, b);

    } catch (e) {

    alert(e);

    }

    6、加入�覆盖物,计时器调用覆盖物

    //加入�覆盖物

    function getBoundary(){      

        var bdary = new BMap.Boundary();

        bdary.get("内蒙古", function(rs){       //获取行政区域

            var count = rs.boundaries.length; //行政区域的点有多少个

            for(var i = 0; i < count; i++){

                var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#0000ff" ,fillColor: ""}); //建立多边形覆盖物 fillColor字体显示出来

                map.addOverlay(ply);  //加入�覆盖物

                map.setViewport(ply.getPath());    //调整视野        

            }

        });  

    }

     

    //计时器调用加入�覆盖物

    setTimeout(function(){

              //清除地图覆盖物

        map.clearOverlays();

        map.centerAndZoom(111.818239, 41.386087, 6);                 // 设置地图坐标,级别

      //加入�行政区域覆盖

        getBoundary();

    }, 1000);

    7、加入�标注

    //point经纬度,txtinfo提示信息,type图片类型

    function addMarker(point, txtInfo, type) {

        var infoWindow = "";

        var marker = new BMap.Marker(point, { icon: mapIcon(type) });

        marker.addEventListener("click", function() {

            infoWindow = new BMap.InfoWindow(txtInfo);

            this.openInfoWindow(infoWindow);

        });

        map.addOverlay(marker);       //加入�标注

          marker.setAnimation(BMAP_ANIMATION_BOUNCE); //动画效果

    }

    //创建ICON

    function mapIcon(type) {

      var mappng;

      switch (parseInt(type)) {

          case 1:

              mappng = "${pageContext.request.contextPath}/images/triangle.png";

              break;

          case 2:

              mappng = "${pageContext.request.contextPath}/images/ban.png";

              break;

            }

      var mapIcon = new BMap.Icon(mappng,

      new BMap.Size(24, 24), {

          offset: new BMap.Size(0, -5),

          imageOffset: new BMap.Size(0, 0)

      });

      return mapIcon;

    }

     

    8、移除标注

    map.removeOverlay(marker);          //移除标注点

     function removeMarker() {
      var mkrs = map.getOverlays();  //获取地图上的标注,从0開始循环
      for (var i=0; i < mkrs.length;i++) {
       //object Polygon 是行政区域描边覆盖物,不移除
       if(mkrs[i] != "[object Polygon]"){
        map.removeOverlay(mkrs[i]);  //移除标注点
       }
      }
     }

    9、加入�文字
     function addTxt(point,txtInfo){
      var opts = {
        position : point,    // 指定文本标注所在的地理位置
        offset   : new BMap.Size(-20, 5)    //设置文本偏移量
      
      }
      var label=new BMap.Label(txtInfo,opts);
      label.setStyle({
        color : "#000000",
        fontSize : "12px",
        height : "20px",
        lineHeight : "20px",
        fontFamily:"微软雅黑",
        border:"#000000"
       });
      map.addOverlay(label);
     }

    10、输入地址获取经纬度

    public static final String KEY_1 = "您的密钥(ak)";   
          
        /**
         * 返回输入地址的经纬度坐标
         * key lng(经度),lat(纬度)
         */ 
        public static Map<String,String> getGeocoderLatitude(String address){ 
            BufferedReader in = null; 
            try { 
                //将地址转换成utf-8的16进制 
                address = URLEncoder.encode(address, "UTF-8"); 
    //       假设有代理,要设置代理,没代理可凝视 
    //      System.setProperty("http.proxyHost","192.168.1.188"); 
    //      System.setProperty("http.proxyPort","3128"); 
                URL tirc = new URL("
    http://api.map.baidu.com/geocoder?address="+ address +"&output=json&key="+ KEY_1); 
                 
                in = new BufferedReader(new InputStreamReader(tirc.openStream(),"UTF-8")); 
                String res; 
                StringBuilder sb = new StringBuilder(""); 
                while((res = in.readLine())!=null){ 
                    sb.append(res.trim()); 
                } 
                String str = sb.toString(); 
                Map<String,String> map = null; 
                if(StringUtils.isNotEmpty(str)){ 
                    int lngStart = str.indexOf("lng":"); 
                    int lngEnd = str.indexOf(","lat"); 
                    int latEnd = str.indexOf("},"precise"); 
                    if(lngStart > 0 && lngEnd > 0 && latEnd > 0){ 
                        String lng = str.substring(lngStart+5, lngEnd); 
                        String lat = str.substring(lngEnd+7, latEnd); 
                        map = new HashMap<String,String>(); 
                        map.put("lng", lng); 
                        map.put("lat", lat); 
                        return map; 
                    } 
                } 
            }catch (Exception e) { 
                e.printStackTrace(); 
            }finally{ 
                try { 
                    in.close(); 
                } catch (IOException e) { 
                    e.printStackTrace(); 
                } 
            } 
            return null; 
        } 
        public static void main(String args[]){ 
            Map<String, String> json = MapAction.getGeocoderLatitude("北京市"); 
            System.out.println("lng : "+json.get("lng")); 
            System.out.println("lat : "+json.get("lat")); 
        } 

     

     

  • 相关阅读:
    Cygwin 与 MinGW/MSYS/MSYS2,如何选择?甚至还有GNU utilities for Win32
    MinGW和MSYS项目是在一起的(翻译官网)
    库存限购
    ElasticSearch指南
    Windows系统的Jenkins持续集成环境
    JavaScript 框架
    Istio Service Mash管理微服务
    LinkedIn微服务框架rest.li
    Istio微服务架构初试
    github
  • 原文地址:https://www.cnblogs.com/hrhguanli/p/3789115.html
Copyright © 2020-2023  润新知