Initial commit
This commit is contained in:
85
public/assets/streetscape.html
Normal file
85
public/assets/streetscape.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html class="no-js css-menubar" lang="zh-cn">
|
||||
<head>
|
||||
<title>弹窗子页面</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<!-- 移动设备 viewport -->
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
|
||||
<meta name="author" content="火星科技 http://mars3d.cn " />
|
||||
<!-- 360浏览器默认使用Webkit内核 -->
|
||||
<meta name="renderer" content="webkit" />
|
||||
|
||||
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=qObioeG8HeeQVrOVAGScPVhDzlmv6rL9"></script>
|
||||
<style type="text/css">
|
||||
body,
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: "微软雅黑";
|
||||
}
|
||||
#streetscapeMap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="streetscapeMap"></div>
|
||||
|
||||
<!--页面js-->
|
||||
<script>
|
||||
var panorama
|
||||
|
||||
window.onload = function () {
|
||||
var request = getRequest()
|
||||
|
||||
var baiduMpt = new BMap.Point(request.lng, request.lat)
|
||||
var map = new BMap.Map("streetscapeMap") // mars3d.Map三维地图对象
|
||||
map.centerAndZoom(baiduMpt, 15)
|
||||
map.addTileLayer(new BMap.PanoramaCoverageLayer())
|
||||
|
||||
panorama = new BMap.Panorama("streetscapeMap")
|
||||
panorama.setPosition(baiduMpt) //根据经纬度坐标展示全景图
|
||||
panorama.setPov({ heading: -40, pitch: 6 })
|
||||
panorama.addEventListener("position_changed", function (e) {
|
||||
//全景图位置改变后,普通地图中心点也随之改变
|
||||
var pos = panorama.getPosition() //街景变换返回触发的回调函数
|
||||
|
||||
if (parent) {
|
||||
pos = parent.mars3d.PointTrans.bd2wgs([pos.lng, pos.lat])
|
||||
parent.postMessage({ lng: pos[0], lat: pos[1] })
|
||||
}
|
||||
|
||||
// var pov = panorama.getPov()
|
||||
})
|
||||
}
|
||||
|
||||
//外部传入坐标,更新街景
|
||||
function setPosition(point) {
|
||||
let bdPoint = parent.mars3d.PointTrans.wgs2bd([point.lng, point.lat])
|
||||
panorama.setPosition(new BMap.Point(bdPoint[0], bdPoint[1])) //根据经纬度坐标展示全景图
|
||||
}
|
||||
|
||||
//url参数获取
|
||||
function getRequest(target) {
|
||||
var theRequest = new Object()
|
||||
try {
|
||||
//屏蔽跨域时报错
|
||||
target = target || window
|
||||
var url = target.location.search //获取url中"?"符后的字串
|
||||
if (url.indexOf("?") != -1) {
|
||||
var str = url.substr(1)
|
||||
var strs = str.split("&")
|
||||
for (var i = 0; i < strs.length; i++) {
|
||||
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1])
|
||||
}
|
||||
}
|
||||
} catch (e) {}
|
||||
return theRequest
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user