准备:
百度地图在线文档:http://developer.baidu.com/map/reference/
百度地图在线实例:http://developer.baidu.com/map/jsdemo.htm
1.百度地图实例化
?? 需要在页面引入百度地图API
??
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
?
然后在Body添加一个Div,用于显示地图,Div大小可自定义
?
<div id="allmap" style="width: 1000px;height: 1000px;" ></div>
?
之后编写初始化代码
???
var map = new BMap.Map("allmap"); // 创建Map实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point,15); // 初始化地图,设置中心点坐标和地图级别。 map.enableScrollWheelZoom(); //启用滚轮放大缩小
?
??? 2.百度地图位置搜索
???
var map = new BMap.Map("allmap"); //实例化百度地图 var address = "海淀区国家图书馆"; //详细地址 var lableName = "国家图书馆"; //建筑名称 var city = "北京"; //城市 var myGeo = new BMap.Geocoder(); //地址解析器 /** * 根据地址获得位置坐标,然后实例化百度地图 */ myGeo.getPoint(address, function(point){ if(point){ map.enableScrollWheelZoom(); //启用滚轮放大缩小 map.centerAndZoom(point,15); //初始化地图,设置中心点坐标和地图级别。 map.addControl(new BMap.NavigationControl()); //添加平移缩放控件 map.addControl(new BMap.OverviewMapControl()); //添加地图缩略图控件 //创建标注(类似定位小红旗) var marker = new BMap.Marker(point); //标注提示文本 var label = new BMap.Label(lableName,{"offset":new BMap.Size(20,-20)}); marker.setLabel(label); //添加提示文本 //创建消息框 var infoWindow = new BMap.InfoWindow(address); //绑定标注单击事件,设置显示的消息框 marker.addEventListener("click",function(){this.openInfoWindow(infoWindow);}); map.addOverlay(marker); //把标注添加到地图 } }, city);
??? 页面效果:
??????
?
3.公交线路查询
???
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>百度地图公交查询</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script> <script type="text/javascript"> var map = null; //实例化百度地图 var address = "海淀区国家图书馆"; //详细地址 var lableName = "国家图书馆"; //建筑名称 var city = "北京"; //城市 var myGeo = new BMap.Geocoder(); //地址解析器 function initMap(){ /** * 根据地址获得位置坐标,然后实例化百度地图 */ myGeo.getPoint(address, function(point){ if(point){ map = new BMap.Map("allmap"); //实例化百度地图 map.enableScrollWheelZoom(); //启用滚轮放大缩小 map.centerAndZoom(point,15); //初始化地图,设置中心点坐标和地图级别。 map.addControl(new BMap.NavigationControl()); //添加平移缩放控件 map.addControl(new BMap.OverviewMapControl()); //添加地图缩略图控件 //创建标注(类似定位小红旗) var marker = new BMap.Marker(point); //标注提示文本 var label = new BMap.Label(lableName,{"offset":new BMap.Size(20,-20)}); marker.setLabel(label); //添加提示文本 //创建消息框 var infoWindow = new BMap.InfoWindow(address); //绑定标注单击事件,设置显示的消息框 marker.addEventListener("click",function(){this.openInfoWindow(infoWindow);}); map.addOverlay(marker); //把标注添加到地图 } }, city); } //查询公交 function findPath(){ var b = document.getElementById("begin").value; //起始位置 var e = document.getElementById("end").value; //结束位置 //初始化公共公交查询系统 var transit = new BMap.TransitRoute(map,{ renderOptions:{ map:map, panel:'panel' } }); transit.search(b,e); //查询 } window.onload= initMap(); //初始化百度地图 </script> </head> <body> <div id="allmap" style="width: 500px;height: 500px;" ></div><br> <input id="begin" type="text" />到<input id="end" type="text" /> &a