一,百度地图使用
对于百度地图这款应用应该很熟悉,而且这个款应用是一款开源的,也就是可以参考相关的文件可以自己操作,进行拿来使用:以下几步可以轻松的获取到百度地图的使用权限
第一步
首先打开这个申请地址http://lbsyun.baidu.com/apiconsole/key
然后按照这个上面这四个步骤依次进行
第二步
在进行第三步时,通过自己需要的方面依次选择
玩浏览器端要注意Referer白名单这个不要填错,如果只想玩玩就填*就行了,填其他的什么的就没有这个权限了,注意注意
二,百度地图基本的显示和一些控件
首先声明,这款应用是开源的,基本的代码和内部很相似,自己就可以拿来玩,我这里只做一些基本的显示。
1,显示整张地图
css界面
html{
height: 100%;
}
body{
height: 100%;
padding: 0;
margin: 0;
}
#baidu{
height: 100%
}
#panorama{
width: 100%;
height: 100%;
}
html界面
<!-- 创建一个盒子来储存百度地图 -->
<div id="baidu"></div>
<!-- 新创建一个全景div -->
<div id="panorama"></div>
<!-- 引入密钥 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<script type="text/javascript">
//引入
var baidu = document.getElementById('baidu');
// var baidu = document.getElementById('baidu');
//地图初始化
var map = new BMap.Map('baidu');
var point = new BMap.Point(116.404 , 39.915);
map.centerAndZoom(point , 15);
map.enableScrollWheelZoom(true);
2,显示百度地图里面一些小控件
//引入控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.setCurrentCity("北京");
map.addControl(new BMap.NavigationControl());
//控件位置偏移
var opts = {offset: new BMap.Size(150, 5)}
map.addControl(new BMap.ScaleControl(opts));
这几个控件依次是让整张地图进行切换地图模式,卫星模式,三维模式以及可以放地图进行放大和切小
3,全景
<!-- 新创建一个全景div -->
<div id="panorama"></div>
//全景
var stCtrl = new BMap.PanoramaControl();
stCtrl.setOffset(new BMap.Size(20, 20));
map.addControl(stCtrl);
//全景触发事件
window.onload = function(){
var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(120.320032, 31.589666));
panorama.setPov({heading: -40, pitch: 6});
}
全景因为有一些版本限制,对于电脑里面没有安装flash,浏览器端的暂时无法进行打开,只能显示一些展示