准备:
百度地图在线文档: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