百度地图API接口

   公司项目需要,需要使用php,easyui开发,其中一个重要的功能是百度地图应该开发。
这个东西之前没有接触过,刚刚看别人写的应该,多少有点生疏。但总算也是入门了,在
此将关键的一些东西记录下来。以备以后慢慢查询。
  首先针对WEB开发,百度地图提供的js api借口。具体怎么用,网上资料很多,但最浅显
最权威的还是到官网去最好了。官网有api接口说明,有demo,资料还是蛮全的。目前官方
网址为http://developer.baidu.com/map/reference/.百度地图开发,先要免费申请密钥,
我用的别人申请好,所以密钥自己申请。

   在你的页面引入js文件,src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"。
然后进行创建实例,进行初始化,如下:
var map = new BMap.Map("container");          // 创建地图实例  
map.centerAndZoom("上海",12);      // 初始化地图,用城市名设置地图中心点
var point = new BMap.Point(121.48, 31.22);  // 创建点坐标  
map.centerAndZoom(point, 12);                 // 初始化地图,设置中心点坐标和地图级别

之后,按照需求,可以添加相关控件。
基本包括,地图上的一些控件:
一,下面四组均为控件设置测试
map.addControl(new BMap.NavigationControl());  //左上角移动控件  
map.addControl(new BMap.ScaleControl());       //右下角标尺控件
map.addControl(new BMap.OverviewMapControl()); //右下角缩略地图,注意观察,不然看不到
map.addControl(new BMap.MapTypeControl());     //左上角可以切换的三个按钮
map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用,
上海已经设置了上海,这个函数有毛用。


二,标注设置测试
var point = new BMap.Point(121.48, 31.22);    
var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中


三,覆盖物
function addMarker(point, index)
{  
// 创建图标对象   
var myIcon = new BMap.Icon("car_green.png", new BMap.Size(45, 25), {    
// 指定定位位置。   
// 当标注显示在地图上时,其所指向的地理位置距离图标左上    
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
  // 图标中央下端的尖角位置。    
  offset: new BMap.Size(10, 25),    
  // 设置图片偏移。   
  // 当您需要从一幅较大的图片中截取某部分作为标注图标时,您   
  // 需要指定大图的偏移位置,此做法与css sprites技术类似。    
  //imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移  ,这个要注掉才显示
 
});      

// 创建标注对象并添加到地图   
var marker = new BMap.Marker(point, {icon: myIcon});    
map.addOverlay(marker);    
}    
 随机向地图添加10个标注    
var bounds = map.getBounds();
console.info(bounds); 


四,监听标注事件
var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中
marker.addEventListener("click", function(){    alert("你好,你点击了这里");    
});


五,标注拖拉事件
marker.enableDragging();    
marker.addEventListener("dragend", function(e){    
 alert("当前位置:" + e.point.lng + ", " + e.point.lat);    
})


六,信息窗口
var opts = {    
 width : 250,     // 信息窗口宽度    
 height: 100,     // 信息窗口高度    
 title : "Hello"  // 信息窗口标题   
}    
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口


七,折线画图
var polyline = new BMap.Polyline([    
   new BMap.Point(lngSpan, latSpan),    
   new BMap.Point(lngSpan+0.02, latSpan+0.010),
   new BMap.Point(lngSpan+0.03, latSpan+0.030)  
 ],    
 {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}    
);    
map.addOverlay(polyline);

你可能感兴趣的:(web前端技术)