javascript api -凯发k8官方旗舰厅

浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。
简介

百度全景地图提供沿着全景覆盖城市指定道路、指定位置点360度的全景视图,相比二维地图全景图更加真实、直观。

javascript api全景地图服务属于高级权限,您可以开通15天试用并了解更多信息。
全景控件

通过全景控件可以从普通地图进入全景地图,添加全景控件的方式同添加工具条等控件类似。点击全景控件会进入全景图,点击全景图右上角的关闭按钮会退回到普通地图。

代码如下:
var stctrl = new bmap.panoramacontrol();  
stctrl.setoffset(new bmap.size(20, 20));  
map.addcontrol(stctrl);

点击查看效果

全景地图用法
全景地图可以与普通地图一样作为div添加到网页里。以下给出展示全景图的核心代码并给出代码说明。
//1

点击查看效果

详细的步骤如下:

1创建容器
创建一个div,该div作为容器“包含”全景地图。
2创建对象
创建全景对象(panorama),构造函数参数与1)中创建的div id相同。
3显示特定位置的全景地图
通过经纬度坐标设置显示特定位置的全景地图;除了指定经纬度外,还可以通过指定全景的id设置当前显示的全景视图,如代码注释部分。
4设置全景视角
heading和pitch两个参数用于设置全景的视角,其中heading指摄像头水平方向(“摇头”)的角度,正北方向为0,正东为90,正南为180,正西为270;pitch指摄像头的垂直方向(“点头”)。
设置全景地图控件
通过设置panorama类的panoramaoption参数和setoptions方法可以指定是否展示全景地图里的导航控件、道路指引控件及相册控件等。
1设置隐藏导航控件
//通过panoramaoption指定
var panorama = new bmap.panorama('panorama', {navigationcontrol: false}); //默认为显示导航控件,默认值为true
//通过setoptions方法指定
panorama.setoptions({navigationcontrol:false});

点击查看效果

2设置隐藏道路指引控件
//通过panoramaoption指定
var panorama = new bmap.panorama('panorama', {linkscontrol:false}); //默认为显示道路指引控件,默认值为true
//通过setoptions方法指定
panorama.setoptions({linkscontrol:false});

点击查看效果

3设置全景相册控件是否展示及展示样式
panorama.setoptions({
    albumscontrol: true,
    albumscontroloptions:{anchor:bmap_anchor_top_left,  //设置相册显示位置
        offset:new bmap.size(10,10),//设置相册距离左上角偏移量
        maxwidth:100%,//设置相册控件的最大显示宽度
        imageheight:80//设置相册控件的高度
    }
});

点击查看效果

设置全景内展示的poi类型
div class="serve-explain-text">

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 
});

点击查看效果

获取全景地图数据
除了展示特定位置、特定视角的全景图外,javascript api也支持获取该类信息,以下给出获取全景id和经纬度坐标的例子。
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;  
});  
}

点击查看效果

1创建检索全景数据信息类的实例
panoramaservice类用于创建检索全景数据信息类的实例,提供三个方法用于获取全景数据:

getpanoramabyid:根据pid获取全景数据

getpanoramabypoiid:根据poiid获取全景数据

getpanoramabylocation:根据坐标返回距离此处最近的全景数据

2根据坐标返回距离此处最近的全景数据
getpanoramabylocation方法可根据坐标返回距离此处最近的全景数据,当获取不到数据时,回调函数参数为null。
全景地图事件

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);  
});

点击查看效果

在全景地图里添加标注
panoramalabel是全景标注类,可设置全景标注的位置(position)和三维高度(altitude)属性,其中三维高度具有“近大远小”的特点,即全景标注点离全景中心点越近,同一个高度值会显示得更高,如下图同时设置标注1和标注2的高度为2米,但是由于标注1距中心点较标注2近,故标注1显示的要高些。
1向全景图添加标注
通过panorama类的addoverlay方法可将panoramalabel标注添加到全景图中。

代码如下:

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
2全景事件
除了添加全景标注外,还可以触发全景标注的单击(click)、鼠标移入(mouseover)、鼠标移出(mouseout)、删除(remove)事件。以下是单击事件的使用方法:
label.addeventlistener('click', function() { //给标注点注册点击事件
    panorama.setpov({  //修改点的视角
        pitch: 15, 
        heading: 180
    });
});

点击查看效果

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消

"));
网站地图