百度地圖js小結

1、擷取javascript API 服務方法，首先申請密鑰（ak），才可成功載入APIJS檔案。

使用方法如下：

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

如果需要限制地區，那麼需要引入下面的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})); //右上方，僅包含平移和縮放按鈕

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 < 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); //添加標註

}

//建立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"));
}