首页 > 代码库 > 百度地图js小结
百度地图js小结
1、获取javascript API 服务方法，首先申请密钥（ak），才可成功载入APIJS文件。
用法例如以下：
<script type="text/javascript" src=http://www.mamicode.com/"http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
假设须要限制区域，那么须要引入以下的js
<!-- 区域限制js -->
<script type="text/javascript" src=http://www.mamicode.com/"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"));
}