更新于 2024.4.19 krpano 1.21.2
谷歌地图需要翻墙,没有使用意义。
必应地图不需要翻墙,体验一般,勉强能用。
官方下载包路径
1.21.2下载包在电脑的路径/viewer/examples/googlemaps/index.html
提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明
动画演示
VIP课程仅供会员阅读,加入会员请查看网站顶部 加入会员 说明查看
krpano 1.21 用法
默认皮肤使用地图
krpano官方有必应地图和谷歌地图两个插件,用户只需简单设置就能快速调用在线地图,使用在线地图的强大功能加强漫游体验。打开tour.xml,可以看到skin_settings设置的前6项(krpano 1.21版本)。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 |
<skin_settings maps="false" maps_type="google" maps_bing_api_key="" maps_google_api_key="" maps_zoombuttons="false" maps_loadonfirstuse="true" |
第二项maps_type为选择使用必应地图或是谷歌地图,可使用的值是bing或者google。
第三项maps_bing_api_key、第四项maps_google_api_key就是你在微软申请的地图api的key和谷歌地图的地图api的key,这个是免费的。
查看微软必应地图申请方式(建议申请)和谷歌地图申请方式(谷歌地图需翻墙,申请意义不大)。
谷歌地图的API key 必须关联信用卡(实名验证),如果超过限制的请求次数,那么 Google 将会开始从信用卡收费。
第五项maps_zoombuttons是否显示在线地图的缩放按钮,也是true和false的两个选项。
第六项maps_loadonfirstuse是否在点击地图按钮时才加载在线地图,默认为true,如果设置为false,则全景加载时便加载在线地图。
默认皮肤的其它相关设置
也就是说如果你要正常使用必应地图,首先要有一个必应地图的key,这个是免费的。
然后,你应购买一个krpano的必应地图插件,官方开发的这个插件功能非常强大。价格是29欧元。在官网的购买页面可以购买,如果你之前已经购买过其他license,你只要选择同样的邮箱,就可以更新自己的license了。如果是1.20版本之后的krpano,159欧元授权已包含了地图插件。
言归正传,这个默认模版的必应地图就是为了使得每个scene都有一个对应的地图点在必应地图上,弹出必应地图的按钮会显示在导航栏左方。我们可以看到在每个scene都有三个属性
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
lat="39.563340" lng="19.904324" heading="0.0" |
如果你要在默认模版上使用更多关于地图的设定,打开skin文件夹中的vtourskin.xml,找到
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 |
<layer name="skin_map_container" type="container" align="leftop" width="100%" height="100%" bgroundedge="get:skin_settings.design_bgroundedge" maskchildren="true"> <layer name="skin_map" state="closed" url="" visible="false" align="lefttop" width="100%" height="50%" x="0" y="0" zorder="1" lat="0" lng="0" zoom="10" bgalpha="0" maptype="satellite" onmapready="skin_addmapspots();"> <maptypecontrol visible="true" align="righttop" x="5" y="5" buttonalign="v" scale.mobile="1.5" /> <radar visible="false" headingoffset="0" /> <spotstyle name="DEFAULT" url="vtourskin_mapspot.png" activeurl="vtourskin_mapspotactive.png" edge="bottom" x="-5" y="-8" scale="0.5" /> <layer name="skin_map_zoom_in" style="skin_base" visible="get:skin_settings.maps_zoombuttons" crop="9|512|46|64" align="right" x="0" y="-40" zorder="2" ondown="layer[skin_map].zoomin(); skin_buttonglow(get(name));" onup="skin_buttonglow(null);" /> <layer name="skin_map_zoom_out" style="skin_base" visible="get:skin_settings.maps_zoombuttons" crop="73|512|46|64" align="right" x="0" y="+40" zorder="2" ondown="layer[skin_map].zoomout(); skin_buttonglow(get(name));" onup="skin_buttonglow(null);" /> </layer> </layer> |
skin_map_container是装载地图的容器,skin_map是地图插件本身。
maptypecontrol、radar以及spotstyle是地图插件内的子元素。具体用法可以查看 必应地图插件官方说明文档以及谷歌地图插件官方说明文档。
在skin_map我们看到还有一个
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
onmapready="skin_addmapspots();" |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- called from bing- or google-maps plugin onmapready event --> <action name="skin_addmapspots" scope="local"> for(set(i,0), i LT scene.count, inc(i), if(scene[get(i)].lat, calc(spotname, 'spot' + i); calc(spotclickevent, 'skin_hidetooltips(); activatespot(' + spotname + '); skin_loadscene(' + scene[get(i)].name + ',get(skin_settings.loadscene_blend)); skin_updatescroll(); delayedcall(0.5,skin_showmap(false));' ); copy(scene[get(i)].mapspotname, spotname); caller.addspot(get(spotname), get(scene[get(i)].lat), get(scene[get(i)].lng), get(scene[get(i)].heading), false, get(spotclickevent), null); if(skin_settings.tooltips_mapspots, set(layer[skin_map].spot[get(spotname)].tooltip, get(scene[get(i)].title) ); txtadd(layer[skin_map].spot[get(spotname)].onover, 'set(hovering,true);', get(style[skin_tooltips].onover:addevent) ); txtadd(layer[skin_map].spot[get(spotname)].onout, 'set(hovering,false);', get(style[skin_tooltips].onout:addevent) ); ); ); ); caller.activatespot( calc(xml.scene != null ? scene[get(xml.scene)].mapspotname : 'spot0') ); caller.zoomToSpotsExtent(); </action> |
自定义在线地图用法
我们也可以自定义必应地图,例如在官方案例中,对(谷歌)地图的使用是这样的。
你电脑的路径\krpano-1.21.2\viewer\examples\googlemaps\googlemaps.xml
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<krpano> <!-- pano image --> <preview url="preview.jpg" /> <image> <cube url="pano_%s.jpg" /> </image> <!-- container layer --> <layer name="mapcontainer" type="container" bgcolor="0xFFFFFF" bgalpha="0.5" align="leftbottom" x="5" y="5" width.normal="270" height.normal="370" width.mobile="200" height.mobile="250"> <!-- maps plugin - use Google for HTML5 and Bing for Flash --> <plugin name="map" keep="true" url="%VIEWER%/plugins/googlemaps.js" key="" maptype="SATELLITE" lat="41.898761" lng="12.473094" zoom="18" align="lefttop" x="10" y="10" width="-20" height="-20" > <radar visible="true" size="300" alpha="0.33" fillcolor="0xFFFFFF" fillalpha="1.0" linecolor="0x00FF00" linealpha="0.5" linewidth="0.5" dragable="true" headingoffset="0" /> <spot name="spot1" lat="41.898761" lng="12.473094" heading="0" active="true" /> </plugin> </layer> </krpano> |
先看看plugin,它和其他插件的写法大同小异,url分别对应两个地图插件的地址,key属性就是地图的key。地图的key是对应域名的,因此你用krpano官方的也没有意义,你需要自己申请。maptype是地图类型,现在是卫星SATELLITE。lat和lng是经纬度,当前地图中心点的经纬度,zoom为地图的缩放级别。
radar的属性与radar的插件的属性基本相似。spot就是每个地图点。
maptype控制是否显示地图类型切换,你可以在卫星和二维地图之间进行切换。
url属性中需对应必应地图插件的路径。
1 |
url="%VIEWER%/plugins/bingmaps.js" |
在 “移花接木(3)- 使用在线地图(必应地图与谷歌地图)” 上有 1 条评论