KRpano 提供了Google 和bing 两种地图选择,分别需要单独去申请对应的KEY,并在 xml skin_settings 内配置。
eg:
<skin_settings
//是否开启地图
maps="true"
//地图类型
maps_type="google"
// bing 地图key,需要申请
maps_bing_api_key="3Tu0ib1asdasds~whYE2KpPasdasdDP6-wQ~AqetasdU-flrBVr-8FayTcyasdasdasdM8yKnTwLZba9j7QYn90dlkazsh_"
//Google地图key,需要申请
maps_google_api_key="AIzaSyCe7Hq9oyoLuHDQeJoMJPA5RNzplk_DXiE"
//缩放按钮是否显示
maps_zoombuttons="false"
/>
可以参考此链接
也可直接访问以下链接进行申请:
google key 申请地址(翻墙可访问):Google maps
bing key 申请地址:Bing maps
以下可以参考下载的 krpano 安装包内路径为:krpano\viewer\examples\googlemaps 下的文件进行编辑。
如果你没有安装包可以到 krpano.com下载
以下是步骤:
大地图:
打开你 vtourskin.xml 找到 layer name=skin_map 的标签,并在标签内添加属性: mapsapi.html5=”http://ditu.google.cn” (谷歌地图需要翻墙才能看,此处添加属性调用中国版的API 地址)
标签内的 onmapready=”skin_addmapspots();” 事件 是指地图准备就绪后调用 skin_addmapspots 事件,看名字就知道是在地图上添加热点,我们找到这个 action 注: (krpano 内 action 标签就是事件定义)
添加地图热点:
【在这个事件内循环了当前场景的数量,多少场景添加多少热点(实践中当然是用户自己添加热点了),设置了热点的点击事件,设置了热点的经纬度(获取的场景内的经纬度,所以在场景标签 scene 内需要设置 经度lat、纬度lng、方位heading属性)】
<action name="skin_addmapspots">
for(set(i,0), i LT scene.count, inc(i),
if(scene[get(i)].lat,
<!--设置热点name,修改:将spot+场景名字作为热点名称,-->
txtadd(spotname, 'spot', get(scene[get(i)].name));
<!--设置热点点击事件 函数:skin_hidetooltips() 热点点击后缩回工具条。activatespot(',get(spotname),');当前热点选中。skin_loadscene();载入场景-->
txtadd(spotclickevent, 'skin_hidetooltips(); activatespot(',get(spotname),'); skin_loadscene(', get(scene[get