百度地图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>