更新于 2020.11.19 krpano 1.20.9
谷歌地图需要翻墙,基本没有使用意义。
必应地图不需要翻墙,但体验一般,只能说是勉强能用。
官方下载包路径
1.20.9下载包在电脑的路径/viewer/examples/googlemaps/index.html
提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明
动画演示
VIP课程仅供会员阅读,加入会员请查看网站顶部 加入会员 说明查看
krpano 1.20 用法
默认皮肤使用地图
krpano官方有必应地图和谷歌地图两个插件,用户只需要简单设置就能快速调用在线地图,使用在线地图的强大功能加强漫游体验。打开tour.xml,可以看到skin_settings设置的前6项(krpano 1.20版本)。
点击代码窗口最右侧按钮,在新窗口打开后复制代码
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。在krpano中该设定只针对html5端的,因谷歌地图不提供flash版本,因此在flash内核下默认使用必应地图(flash也已经是过时,所以基本上只需要考虑谷歌地图)。
第三项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 |
<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="normal" onmapready="skin_addmapspots();" > |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
<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();" mapsapi.html5="http://ditu.google.cn" > |
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 |
mapsapi.html5="http://ditu.google.cn" |
Flash端可使用chen4490改后的必应地图SWF插件(经测试在1.19 pr13版本仍然可用) 链接:http://pan.baidu.com/s/1ntiua73 密码:21z2
下载下来的1.17的插件bingmaps.swf拷贝到vtour下的plugins文件夹覆盖。
(经验证(2019年9月),在krpano 1.20下无需使用改版的SWF插件来特别调用必应地图)
至此基本上大功告成。
如果你要在默认模版上使用更多关于地图的设定,打开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 |
<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) ); txtadd(layer[skin_map].spot[get(spotname)].onout, 'set(hovering,false);', get(style[skin_tooltips].onout) ); ); ); ); caller.activatespot( calc(xml.scene != null ? scene[get(xml.scene)].mapspotname : 'spot0') ); caller.zoomToSpotsExtent(); </action> |
自定义在线地图用法
当然。默认模版的必应地图功能是有限的。我们也可以自定义谷歌地图,例如在官方案例中,对地图的使用是这样的。
你电脑的路径\krpano-1.20\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 30 31 32 |
<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.html5="%VIEWER%/plugins/googlemaps.js" url.flash="%VIEWER%/plugins/bingmaps.swf" key.html5="" key.flash="" mapsapi.html5="http://ditu.google.cn" 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是地图类型,现在是卫星。lat和lng是经纬度,当前地图中心点的经纬度,zoom为地图的缩放级别。
radar的属性与radar的插件的属性基本相似。spot就是每个地图点。
maptype控制是否显示地图类型切换,你可以在卫星和二维地图之间进行切换。
在 “移花接木(3)- 使用在线地图(必应地图与谷歌地图)” 上有 1 条评论