最近在给学校做校友网,老师要个图片墙。在下仔细想了想,干嘛那么麻烦,直接调用腾讯的街景地图不得了么,不仅简单,而且高端大气上档次。哈哈,不多说了,直接上代码吧.
然后你需要把qq map js库引入你的网页。代码如下,
d84d6d8hfhfh3e0e51e481e50454ccbe8986b 是apikey,
要换成你自己的apikey。
[code]<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=<span style="color: rgb(255, 0, 0);">d84d6d8hfhfh3e0e51e481e50454ccbe8986b</span>"></script>[/code]
然后就可以在你的网页创建你所需要创建的街景了。这里以烟台大学为例
[code]
<script>
function init() {
// 创建街景
pano = new qq.maps.Panorama(document.getElementById(‘pano_container’), {
"pano": ‘22051122130807111308800’</pre>
<pre> });
}
</script>
[/code]
需要注意一下这个东西,”pano”: ‘22051122130807111308800’。pano :一个360度的全景即为一个场景(街景是由无数个场景组成的),每一个场景都有自己的一个唯一标识,我们称为“PanoId”。
问题来了,我们如何获得PanoId呢?
Api里有这样一个类 qq.maps.PanoramaService 类,这个类里有一个方法叫
[code]getPano(position:LatLng, radius:Number, callback:Function)[/code]
.
我们可以通过这个方法来获得PanoId。
OK!又来一个问题。What‘s LatLng?
LatLng 是经纬度。可以用这个类设置经纬度。
[code]
var panoLatLng = new qq.maps.LatLng(37.475743, 121.457118);
[/code]
接下来我们可以用这个经纬度来获得PanoId;
[code]
var pano_service = new qq.maps.PanoramaService();
pano_service.getPano(panoLatLng, 200, function(result){
pano.setPano(result.svid);
}
//result.svid 就是PanoId。
[/code]
呵呵,就是这样了。
下面代码提供两种方法创 建街景。
[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>烟台大学街景地图</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
</style>
<script>
var init = function() {
/*
var pano = new qq.maps.Panorama(document.getElementById(‘pano_holder’), {
pano: ‘22051122130807111308800’,
disableMove: false,
disableFullScreen: false,
zoom:1,
pov:{
heading: 180,
pitch: 0
}
});
*/
var panoLatLng = new qq.maps.LatLng(37.475743, 121.457118);
// 创建街景
var pano = new qq.maps.Panorama(document.getElementById(‘pano_holder’));
var pano_service = new qq.maps.PanoramaService();
pano_service.getPano(panoLatLng, 200, function(result){
pano.setPano(result.svid);
});
}
</script>
</head>
<body onLoad="init()">
<div style="width:100%;height:100%" id="pano_holder"></div>
<script src="http://map.qq.com/api/js?v=2.exp&key=d84d6d83e0e51e481e50454ccbe8986b"></script>
</body>
</html>
[/code]
不错,挺详细的