百度地图API开发笔记一(基础篇)

什么是百度地图API？

百度地图API是一套由JavaScript语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用。百度地图API包含了构建地图基本功能的各种接口，提供了诸如本地搜索、路线规划等数据服务。

测试js API代码（并附详细注释）

HTML头部记得引入百度地区API版本

http://api.map.baidu.com/api?v=1.3

<div id="results"></div>
//用于存放搜索结果
<div id="container"></div>
//用于显示地图主体内容（必选）<script type="text/javascript">// <![CDATA[
var map = new BMap.Map("container"); // 创建地图实例 （必选）
var point = new BMap.Point(117.242856, 31.822101); // 创建点坐标 （必选）
map.addControl(new BMap.NavigationControl());//开启控制 控件
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.CopyrightControl()); //左下角显示版权信息
map.addControl(new BMap.MapTypeControl());//显示地图类型 （卫星，地图三维）
map.enableScrollWheelZoom();	//开启鼠标滚轮
map.centerAndZoom(point, 15); 	// 初始化地图，设置中心点坐标和地图级别 (地图缩放级别)（必选）

var marker = new BMap.Marker(point);  // 创建标注  
map.addOverlay(marker);  // 将标注添加到地图中  
marker.addEventListener("click", function(data){  //监听点击事件
 alert('你点击的了坐标');  
});  
marker.enableDragging();  //开启拖拽
marker.addEventListener("dragend", function(e){  //监听拖拽放开后事件
 alert("当前位置：" + e.point.lng + ", " + e.point.lat);  //弹出回传 经纬度
});

var opts = {  
 width : 250,  // 信息窗口宽度  
 height: 80,   // 信息窗口高度  
 title : "目标地区"  // 信息窗口标题  
}  
var infoWindow = new BMap.InfoWindow("<img src='http://hfhouse.com/images/2012/logo.gif' />", opts);  // 创建信息窗口对象  
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口  

/* 绘制线条
 * 起始坐标画线	
 * 总共花了三条线
 */

 //第一条
var polyline = new BMap.Polyline([  
   new BMap.Point(119.28898, 26.022776),  
   new BMap.Point(123.490391, 25.754419)  
 ],  
 {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}  
);  
map.addOverlay(polyline);  

//第二条
var polyline = new BMap.Polyline([  
   new BMap.Point(121.884221, 29.634663),  
   new BMap.Point(123.490391, 25.754419)  
 ],  
 {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}  
);  
map.addOverlay(polyline);  
//第三条
var polyline = new BMap.Polyline([  
   new BMap.Point(117.232076, 31.821718),  
   new BMap.Point(123.490391, 25.754419)  
 ],  
 {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}  
);  
map.addOverlay(polyline); 

/*监听鼠标点击事件*/
map.addEventListener("click", function(e){  
  var center = map.getCenter(); 
	//alert("地图中心点变更为：" + center.lng + ", " + center.lat);  	 //点击时 当前地区的中心点坐标
	//alert("地图缩放至：" + this.getZoom() + "级"); 	//点击时 弹出当前地图地图缩放级别
	alert(e.point.lng + ", " + e.point.lat); 	//点击位置的坐标
	//map.removeEventListener("click", showInfo);  	//移除监听事件
});  

/*监听鼠标缩放*/
map.addEventListener("zoomend", function(){  
	//alert("地图缩放至：" + this.getZoom() + "级");  //鼠标滚动缩放时弹出当前缩放等级
});  

/*本地搜索 方式1  采用已实例的地区进行搜索*/

var local = new BMap.LocalSearch(map, {  
 renderOptions:{map: map}  
});  
local.search("火车站");

/*
var local = new BMap.LocalSearch(map, {  
 renderOptions: {map: map, panel: "results"}  
});  
local.search("华邦世贸"); 
*/ 

/*本地搜索 方式2  直接采用文字搜索
	var map = new BMap.Map("container");  
	map.centerAndZoom(new BMap.Point(117.242856, 31.822101), 15);  
	var local = new BMap.LocalSearch("合肥市", {  
	 renderOptions: {  
	   map: map,  
	   autoViewport: true,  
	   selectFirstResult: false  
	 },  
	  pageCapacity: 8  
	});  
	local.search("火车站");  

*/

//map.removeOverlay(marker); 	//释放掉某一标注，不用时释放掉，节省内存
// ]]></script>