百度地图的使用

123629996

浏览: 295304 次
性别:
来自: 西安

最近访客更多访客>>

lelonta

plumcrane

fireflybird

MarshWinter

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

在项目中，我们是有可能要用到地图之类的来标示位置信息的，所以，查阅百度地图的api后简单做了个小例子，有需要详细了解的可以参阅百度地图的api使用实例，还是很清楚的。手机充值：http://yjck67.taobao.com，自己的小店

实际上，百度的api调用还是比较容易的，采用javascript的方式调用，只要有网络就行，其书写方式采用了面向对象的方式，所以对于使用面向对象编程语言的人来说还是很好理解的。

下面看看代码：

<!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:1000px;height:800px;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(108.9535, 34.26586);    // 创建点坐标
map.centerAndZoom(point,20);                     // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。
map.enableKeyboard();                         // 启用键盘操作。
//var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)};
map.addControl(new BMap.NavigationControl());			//添加鱼骨控件
map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);              // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画


marker.addEventListener("click", function(){   
  alert(" 这里可是西安市的中心位置啊");   
});


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.addContextMenu(contextMenu);
 
 
 
 var local = new BMap.LocalSearch(map, {
  renderOptions:{map: map}
});
local.search("钟楼");



/*
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        alert('您的位置：'+r.point.lng+','+r.point.lat);
    }
    else {
        alert('failed'+this.getStatus());
    }        
})*/
</script>

上图就是一些效果