百度地图API - 普通地图与全景图联动展示
<div id='panorama'></div>
<div id='normal_map'></div>
<script type='text/javascript' src='http://api.map.baidu.com/api?v=3.0&ak=xTbnrKxiLY6SbuOI3rl5Z3WGmfGBBF7O'></script>
<script type='text/javascript'>
// 全景图展示
var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(120.320032, 31.589666)); // 根据经纬度坐标展示全景图
panorama.setPov({ heading: -40, pitch: 6 });
panorama.addEventListener('position_changed', function (e) {
  // 全景图位置改变后,普通地图中心点也随之改变
  var pos = panorama.getPosition();
  map.setCenter(new BMap.Point(pos.lng, pos.lat));
  marker.setPosition(pos);
});
var mapOption = {
  mapType: BMAP_NORMAL_MAP,
  maxZoom: 18,
  drawMargin: 0,
  enableFulltimeSpotClick: true,
  enableHighResolution: true
}
var map = new BMap.Map('normal_map', mapOption);
var testpoint = new BMap.Point(120.320032, 31.589666);
map.centerAndZoom(testpoint, 18);
var marker = new BMap.Marker(testpoint);
marker.enableDragging();
map.addOverlay(marker);
marker.addEventListener('dragend', function (e) {
  panorama.setPosition(e.point); // 拖动marker后,全景图位置也随着改变
  panorama.setPov({ heading: -40, pitch: 6 });
});
map.enableScrollWheelZoom();
// 启用滚轮放大缩小,默认禁用
map.enableContinuousZoom();
 // 启用地图惯性拖拽,默认禁用
</script>
原文地址: https://www.cveoy.top/t/topic/mwfQ 著作权归作者所有。请勿转载和采集!