首页 安全防御正文

腾讯搜搜街景地图api调用的 ***

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

 
 


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

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

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

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

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=这里替换自己的key"></script> 
<!--引入插件--> 
<script 
src="https://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> 

来源:博客,欢迎分享本文!

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。