百度地图插件学习

【Javascript】

下载

新闻

文章

最近开发足迹功能，需要使用到百度地图功能，特地记录一些简单运用。

百度地图
开始学习百度地图API最简单的方式是看一个简单的示例。以下代码创建了一个地图并以天安门作为地图的中心：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>百度地图的Hello, World</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:100%;height:100%;" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");            // 创建Map实例
var point = new BMap.Point(116.404, 39.915);    // 创建点坐标
map.addControl(new BMap.NavigationControl());   // 添加平移缩放控件(可选)
map.addControl(new BMap.ScaleControl());        // 添加比例尺控件(可选)
map.addControl(new BMap.OverviewMapControl());  //添加缩略地图控件(可选)
map.addControl(new BMap.MapTypeControl());      //添加地图类型控件(可选)
map.centerAndZoom(point,15);                    // 初始化地图,设置中心点坐标和地图级别。
</script>

对地图添加事件监听

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

map.addEventListener("click", function(e){
  alert("你点的点是:"+ e.point.lng + ", " + e.point.lat);
});

map.addEventListener("tilesloaded",function(){alert("地图加载完毕");});
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.addEventListener("dragend", function(){
  var center = map.getCenter();
  alert("你已经移动了地图："+ center.lng + ", " + center.lat);
});
map.addEventListener("zoomend", function(){
  alert("地图缩放至：" + this.getZoom() + "级");
});

map.addEventListener("click", showInfo);//移除事件监听函数

在地图上添加标注

var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);              // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画（可选）
marker.enableDragging(true); // 设置标注可拖拽（可选）
marker.addEventListener("click", function(){   
  alert("您点击了标注");   
});

自定义标注图标,显示局部图片

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自定义标注图标,显示局部图片</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
 
// 编写自定义函数,创建标注
function addMarker(point, index){
  var myIcon = new BMap.Icon( "http://openapi.baidu.com/map/images/custom_a_j.png",new BMap.Size(28, 37),
  {
     offset: new BMap.Size(10, 25),
  imageOffset: new BMap.Size(0 - index * 28, 0)
  });
  
  var marker = new BMap.Marker(point, {icon: myIcon});
  map.addOverlay(marker);
} 
// 随机向地图添加10个标注
var bounds = map.getBounds();
var lngSpan = bounds.maxX - bounds.minX;
var latSpan = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i ++) {
  var point = new BMap.Point(bounds.minX + lngSpan * Math.random() * 0.7, bounds.minY + latSpan * Math.random() * 0.7);
  addMarker(point, i);
}
</script>

添加折线覆盖物

<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var polyline = new BMap.Polyline([
  new BMap.Point(116.399, 39.910),
  new BMap.Point(116.405, 39.920)
], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
map.addOverlay(polyline);
</script>

在标注上打开信息窗

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在标注上打开信息窗</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
var marker = new BMap.Marker(point);
var opts = {
  width : 250,     // 信息窗口宽度
  height: 100,     // 信息窗口高度
  title : "Hello"  // 信息窗口标题
}
map.centerAndZoom(point, 15);
map.addOverlay(marker);

var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象

marker.addEventListener("click", function(){          
   this.openInfoWindow(infoWindow);  
});

</script>

右键菜单添加标注

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>右键菜单添加标注</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); 
var point = new BMap.Point(116.404, 39.915);
var contextMenu = new BMap.ContextMenu();
var txtMenuItem = [
  {
   text:'放大',
   callback:function(){map.zoomIn()}
  },
  {
   text:'缩小',
   callback:function(){map.zoomOut()}
  },
  {
   text:'放置到最大级',
   callback:function(){map.setZoom(18)}
  },
  {
   text:'查看全国',
   callback:function(){map.setZoom(4)}
  },
  {
   text:'在此添加标注',
   callback:function(p){
    var marker = new BMap.Marker(p), px = map.pointToPixel(p);
    map.addOverlay(marker);
   }
  }
 ];


 for(var i=0; i < txtMenuItem.length; i++){
  contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
  if(i==1 || i==3) {
   contextMenu.addSeparator();
  }
 }
 
 map.centerAndZoom(point,15);
 map.addContextMenu(contextMenu);

</script>

IP定位非常推荐

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IP定位</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");            // 创建Map实例
var point = new BMap.Point(116.404, 39.915);    // 创建点坐标
map.centerAndZoom(point,15);

function myFun(result){
    var cityName = result.name;
    map.setCenter(cityName);
    //alert(cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
</script>

地址解析

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>地址解析</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint("北京市海淀区上地10街", function(point){
  if (point) {
    map.centerAndZoom(point, 16);
    map.addOverlay(new BMap.Marker(point));
  }
}, "北京市");

</script>

反地址解析

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>反地址解析</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
var pt = new BMap.Point(108.318421,22.800617);
map.centerAndZoom(pt, 15);

var gc = new BMap.Geocoder();    

map.addEventListener("click", function(e){        
    var pt = e.point;
    gc.getLocation(pt, function(rs){
        var addComp = rs.addressComponents;
        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
    });        
});
</script>