使用QQ街景地图开发烟大实景地图

By | 2014/04/20

最近在给学校做校友网,老师要个图片墙。在下仔细想了想,干嘛那么麻烦,直接调用腾讯的街景地图不得了么,不仅简单,而且高端大气上档次。哈哈,不多说了,直接上代码吧.

首先你要申请腾讯地图开发密钥在这里申请

然后你需要把qq map js库引入你的网页。代码如下,

d84d6d8hfhfh3e0e51e481e50454ccbe8986b 是apikey,

要换成你自己的apikey。

<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>

然后就可以在你的网页创建你所需要创建的街景了。这里以烟台大学为例


<script>
function init() {
 // 创建街景
 pano = new qq.maps.Panorama(document.getElementById('pano_container'), {
 "pano": '22051122130807111308800'</pre>
<pre> });
}
</script>

 

需要注意一下这个东西,”pano”: ‘22051122130807111308800’。pano :一个360度的全景即为一个场景(街景是由无数个场景组成的),每一个场景都有自己的一个唯一标识,我们称为“PanoId”。

问题来了,我们如何获得PanoId呢?

Api里有这样一个类   qq.maps.PanoramaService 类,这个类里有一个方法叫

 

getPano(position:LatLng, radius:Number, callback:Function)

.
我们可以通过这个方法来获得PanoId。

 

OK!又来一个问题。What‘s LatLng?

LatLng 是经纬度。可以用这个类设置经纬度。


var panoLatLng = new qq.maps.LatLng(37.475743, 121.457118);

接下来我们可以用这个经纬度来获得PanoId;


var pano_service = new qq.maps.PanoramaService();

pano_service.getPano(panoLatLng, 200, function(result){

        pano.setPano(result.svid);

}

//result.svid   就是PanoId。

呵呵,就是这样了。

下面代码提供两种方法创 建街景。

<!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>

查看demo

One thought on “使用QQ街景地图开发烟大实景地图

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.