腾讯搜搜街景地图api调用的方法

- 编辑:冯耀宗 -

相信很多旅游网站都希望做一个街景地图来吸引客户吧,当然我想希望调用街景地图的不仅仅是旅游网站,我想很多企业网站也希望有一个街景地图让客户更快的找到您公司的地址,那么今天我给大家演示一下调用腾讯搜搜街景地图。

 
 


看到后效果是不是很炫?下面是普通地图,上面是街景地图,不单给我们网站带来更好的用户体验,还能够留住我们的用户。下面来看看制作的方法吧。

1、申请腾讯,申请地址:http://open.map.qq.com/(网站调用请申请JavaScript V2)。申请无任何条件要求,随便填写即可申请。

2、复制以下代码,替换自己的key,同时替换自己需求的坐标ID

2、打开搜搜地图:http://map.qq.com/找到自己需求的坐标开启街景地图,即可在浏览器地址栏看到key复制到代码key处即可显示。

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=这里替换自己的key"></script> 
<!--引入插件--> 
<script 
src="http://api.map.soso.com/plugin/v2/PanoramaOverview/PanoramaOverview-min.js"></script> 
 
<!--以下div街景-->
<div id="panoCon" style="height: 400px;"></div> 
<!--以下div显示地图-->
<div id="overViewCon" style="height:200px;"></div> 
 
<script> 
//创建街景
var panorama = new soso.maps.Panorama('panoCon', { 
pano:'10041001110909115346304', //场景ID
disableMove: false,
pov:{ //视角
heading:3, //偏航角
pitch:8 //俯仰角
},
zoom:1
}); 
//创建插件实例 
var ovc=document.getElementById('overViewCon'); //地图容器(与街景连动的地图)
var overview = new soso.maps.PanoOverview(ovc,{ 
panorama:panorama 
}); 
 
//以下方法可获取连动地图的Map实例
//获取后,可根据自己需要进行后续逻辑开发,如:在地图上标注、添加infowindow 或 覆盖物等
var map=overview.getMap();
 
</script> 

来源:(QQ/微信号:394062665),欢迎分享本文,转载请保留出处!

你会喜欢下面的文章? You'll like the following article.