百度地图(14)-全景图

1. 百度地图提供了两种全景图的方式,一种是提供全景图控件,第二种是提供接口。

2. 全景图控件

1   function addPanoramaControl(){
2     map.addTileLayer(new BMap.PanoramaCoverageLayer());
3 
4     var stCtrl = new BMap.PanoramaControl(); //构造全景控件
5     stCtrl.setOffset(new BMap.Size(20, 60));
6     map.addControl(stCtrl);//添加全景控件
7   }

3. 全景图接口

 1   function addPanoramaByXy(){
 2     map.addTileLayer(new BMap.PanoramaCoverageLayer());
 3     var panorama = new BMap.Panorama('results');
 4     panorama.setPov({heading:-40,pitch:6});
 5     map.removeEventListener("click");
 6     map.addEventListener("click",function (e) {
 7       var pt = e.point;
 8       panorama.setPosition(pt);
 9     })
10   }

自定义显示全景图的触发事件(“click”),自定义全景图显示的div(“results“)。

定义 BMap.Panorma 对象,然后在地图点击时,根据点击位置,使用setPosition 查看该点击位置的全景图。

4. 页面显示

通过控件加载全景图,会有默认的控件图标,点击后在地图上的蓝色路线上移动,会有全景图的预览。点击后进入全景图画面。

 自定义接口通过代码定义触发事件,自定义全景图的窗口。

5. 代码参考

https://github.com/WhatGIS/bdMap

原文地址:https://www.cnblogs.com/googlegis/p/14685449.html