1,申请密钥:key=&v=1.1&services=true
2,初始化头文件
<!DOCTYPE html>
<head><title>百度地图</title>
<meta charset="utf-8">
<script src=""http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>
3,创建一个盛放地图的div:
<div width="500px" height="500px" id="container"></div>
4,初始化地图:
var map1=new BMap.Map("container");//申请地图图片
map1.centerAndZoom(new BMap.point(12.00435,14.57483),11);//初始化地图坐标,地图放大倍数
5,丰富地图功能:
*添加地图控件:
map2.addControl(new BMap.NavigationControl());//添加平移缩放控件
map2.addControl(new BMap.ScaleControl());//添加比例尺
map2.addControl(new BMap.OverviewControl());//添加小地图
map2.addControl(new BMap.MapTypeControl());//添加地图类型
**控件参数:
所有:
anchor(控件位置):BMAP_ANCHOR_TOP/BUTTON_LEFT/RIGHT(左上角,右上角。。。)
offset(偏移量):new BMap.Size(10,20)
navagationControl参数:
type(类型):BMAP_NAVIGATION_CONTROL_LARGE/SMALL/PAN/ROOM(完整,小型,平移部分,缩放部分)
实例:map2.addControl(new BMap.OverviewControl({offset:new BMap.Size(10,20),anchor:BMAP_ANCHOR_TOP_LEFT}))
5,自定义地图
打开百度地图个性在线编辑器:http://lbsyun.baidu.com/custom/
选择需要的元素,属性,样式。查看JSON
代码:
var mystyle1=json内容;
map.setMapStyle ( {styleJson:mystyle1} ) ;
6,向地图添加标注
*坐标点
var pints=new BMap.point(12.6363,54.25155);
var example=new BMap.Marker(points);
map2.addOverlay(example);
*信息框
var info={width:100,height:100,title:"beijing"}
var infowindow=new BMap.InfoWindow("world",info);
map2.openInfoWindow(infowindow,map2.getCenter());
7,添加监听标注事件
example.enableDragging();//允许标注被拖拽
example.addEventListener("dragend",function(e){
alert(e.point.lat+","+e.point.lng);
}// 事件监听函数中传递事件对象e,每个e参数至少包含事件类型(type)和触发该事件的对象(target)
API还保证函数内的this指向触发(同时也是绑定)事件的API对象:
map2.addEventListener("zoomend",function(){ alert(this.getZoom())});//通过this获得地图放大级别
8,增加图层
var traffic=new BMap.TrafficLayer();
map2.addTileLayer(traffic);//添加
map2.removeTileLayer(traffic);
9,逆地址解析
map2.addEventListener("mouseover",function(e){
var x1=e.point.lng;
var x2=e.point.lat;
var location=new BMap.Geocoder();
location.getLocation(new BMap.Point(x1,x2),function(result){
if(result){
alert(result.address+x1+x2);
}});
});
10,路线规划(DrivingRoute驾车,TransitRoute公交,WalkingRoute步行)
<input id="start" type="text"></input> <input id="end" type="text"></input>
<button οnclick="search()">搜索</button>
var m1=document.getElementById("start");
var m2=document.getElementById("end");//此容器用于搜索
function search(){
var start1=m1.value;
var end1=m2.value;
var drving=new BMap.DrivingRoute(map2,
renderOptions:{
map:map2,
panel:"result2", //不同的路线结果文字叙述放在id为result2的容器里
autoViewports:true
})
driving.search(start1,end1);
}
<div id="result2" style=""></div>//此容器用于盛放不同的路线结果
如果把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数。
11,全景图展现:
希望:实现在地图上输入起点和终点,进入全景模式能够自动导航。
添加全景控件:
var panorama=new BMap.Panorama();
panorama.setOffset(new BMap.Size(10,10));
map2.addControl(panorama);
注意:在添加全景控件时可能会失败,主要是密钥和浏览器的问题。密钥申请时有浏览器端,服务器端,安卓,微信小程序等,如果使用自己的电脑写demo,没有服务器,建议申请浏览器端密钥,将白皮?设置为*,使所有的都可以运行该密钥即可。
学到此处写个小demo,实现拖拽标注时,显示标注所在坐标的全景图。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:500px;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AYvXznHSms7Dvx2C9zMxLEHOe99qA54g"></script>
<title>显示全景控件</title>
</head>
<body>
<input id="start" type="text"></input>
<input id="end" type="text"></input>
<button οnclick="search1()">搜索</button>
<div id="allmap"></div>
<p id="results">在地图上添加全景控件,点击全景控件进入全景图</p>
<div id="panorama" style="width:70%;height:600px;"></div>
<div id="panorama1" style="width:70%;height:600px;"></div>
<script type="text/javascript">
var map = new BMap.Map('allmap');
map.centerAndZoom(new BMap.Point(120.305456, 31.570037), 12);
map.enableScrollWheelZoom(true);//申请一个地图
var marker=new BMap.Marker(new BMap.Point(120.305456, 31.570037));
map.addOverlay(marker);
marker.enableDragging();//添加一个标注控件
marker.addEventListener("dragend",function(e){
var m1=e.point.lng;
var m2=e.point.lat;//获取控件移动后的坐标
var panorama1 = new BMap.Panorama('panorama1', {
'disableIndoorSceneSwitchControl': true //室内全景
});
panorama1.setPosition(new BMap.Point(m1, m2));
panorama1.setPov({heading:-40,pitch:6});
var panorama =new BMap.Panorama("panorama",{'disableIndoorSceneSwitchControl': true});
panorama.setPosition(new BMap.Point(m1, m2));
panorama.setPov({heading:-40,pitch:6});//室外全景图
});
</script>
</body>
</html>