百度全景地图提供沿着全景覆盖城市指定道路、指定位置点360度的全景视图,相比二维地图全景图更加真实、直观。
javascript api全景地图服务属于高级权限,您可以开通15天试用并了解更多信息。通过全景控件可以从普通地图进入全景地图,添加全景控件的方式同添加工具条等控件类似。点击全景控件会进入全景图,点击全景图右上角的关闭按钮会退回到普通地图。
代码如下:var stctrl = new bmap.panoramacontrol(); stctrl.setoffset(new bmap.size(20, 20)); map.addcontrol(stctrl);
//1
详细的步骤如下:
//通过panoramaoption指定 var panorama = new bmap.panorama('panorama', {navigationcontrol: false}); //默认为显示导航控件,默认值为true //通过setoptions方法指定 panorama.setoptions({navigationcontrol:false});
//通过panoramaoption指定 var panorama = new bmap.panorama('panorama', {linkscontrol:false}); //默认为显示道路指引控件,默认值为true //通过setoptions方法指定 panorama.setoptions({linkscontrol:false});
panorama.setoptions({ albumscontrol: true, albumscontroloptions:{anchor:bmap_anchor_top_left, //设置相册显示位置 offset:new bmap.size(10,10),//设置相册距离左上角偏移量 maxwidth:100%,//设置相册控件的最大显示宽度 imageheight:80//设置相册控件的高度 } });
panorama的setpanoramapoitype方法可以指定显示的poi类型,目前支持的类型包括:酒店、餐饮、电影院、公交站点、室内景等。设置类型为bmap_panorama_poi_none时,表示隐藏掉所有的poi。
指定全景视野内仅显示餐馆类型核心代码:panorama.setpanoramapoitype(bmap_panorama_poi_catering); //餐饮 panorama.setpov({pitch: 6, heading: 138});
百度地图api除了支持沿道路的全景外,还支持景区、酒店内的室内景。 室内景与普通全景的差别在于:
1) 普通全景支持根据经纬度和id两种方式设置全景图,而室内景只能通过id设置;
2) 普通全景panoramaoption类不支持室内景切换控件,室内景则支持。
给室内景设置内景切换控件的核心代码:var panorama = new bmap.panorama('panorama', { 'disableindoorsceneswitchcontrol': true //默认为显示室内景场景点切换控件,默认值为false }); panorama.setoptions({ 'disableindoorsceneswitchcontrol': true });
var panoramaservice = new bmap.panoramaservice(); //1 panoramaservice.getpanoramabylocation(new bmap.point(120.31, 31.58), function(data){ //2 var panoramainfo=""; if (data == null) { console.log('no data'); return; } panoramainfo ='全景id为:' data.id '\n'; panoramainfo ='坐标为:' data.position.lng ':' data.position.lat '\n'; document.all('svinfotext').innerhtml= panoramainfo; }); }
getpanoramabyid:根据pid获取全景数据
getpanoramabypoiid:根据poiid获取全景数据
getpanoramabylocation:根据坐标返回距离此处最近的全景数据
javascript api提供position_changed(位置改变事件)links_changed(相邻道路全景变化事件)、pov_changed(视角改变事件)、zoom_changed(zoom级别改变事件)等事件,用来监测全景状态的变化。
代码如下:var panorama = new bmap.panorama('panorama'); panorama.setposition(new bmap.point(120.320032, 31.589666)); panorama.addeventlistener('position_changed', function(e){ //注册全景位置改变事件 var pos = this.getposition(); console.log(e.type); });
代码如下:
var panorama = new bmap.panorama('panorama'); panorama.setposition(new bmap.point(116.403925,39.913903));//坐标点在天安门 var labelposition = new bmap.point(116.403925,39.913903); var labeloptions = { position: labelposition, altitude:5 };//设置标注点的经纬度位置和高度 var label = new bmap.panoramalabel('自定义标注-天安门广场', labeloptions);//创建全景标注对象 panorama.addoverlay(label);//在全景地图里添加该标注 panorama.setpov(label.getpov()); //修改点的视角,朝向该label
label.addeventlistener('click', function() { //给标注点注册点击事件 panorama.setpov({ //修改点的视角 pitch: 15, heading: 180 }); });