百度地图js小结

标签：百度地图   map   js   

1、获取javascript API 服务方法，首先申请密钥（ak），才可成功加载APIJS文件。

使用方法如下：

>

如果需要限制区域，那么需要引入下面的js

>

2、设置样式，冲满全屏，弹出窗口的样式

body, html,#l-map{width: 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}));  //右上角，仅包含平移和缩放按钮

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

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

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

            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);       //添加标注

}

//创建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);          //移除标注点

9、输入地址获取经纬度

public static final String KEY_1 = "您的密钥（ak）";   
      
    /**
     * 返回输入地址的经纬度坐标
     * key lng(经度),lat(纬度)
     */ 
    public static Map 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 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(); 
                    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 json = MapAction.getGeocoderLatitude("北京市"); 
        System.out.println("lng : "+json.get("lng")); 
        System.out.println("lat : "+json.get("lat")); 
    } 

 

 

百度地图js小结,搜素材,soscw.com

百度地图js小结

标签：百度地图   map   js   

原文地址：http://blog.csdn.net/java_xiaobin/article/details/25718361