街景地图

最新推荐文章于 2025-06-14 16:09:23 发布

哲-哲

最新推荐文章于 2025-06-14 16:09:23 发布

阅读量1k

点赞数

本文详细介绍了如何使用腾讯地图API集成街景功能，包括申请API、获取坐标ID、代码实现以及如何在浏览器中展示街景地图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


1、申请腾讯，申请地址：<a target=_blank href="http://open.map.qq.com/" target="_blank"><span style="color:blue;">http://open.map.qq.com/</span></a>（网站调用请申请JavaScript V2）。申请无任何条件要求，随便填写即可申请。<p align="left">2、复制以下代码，替换自己的key，同时替换自己需求的坐标ID</p><p align="left">2、打开搜搜地图：<a target=_blank href="http://map.qq.com/" target="_blank"><span style="color:blue;">http://map.qq.com/</span></a>找到自己需求的坐标开启街景地图，即可在浏览器地址栏看到key复制到代码key处即可显示。</p>
    <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>