百度地图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{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}));  //右上角，仅包括平移和缩放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")); 

    }