移花接木(3)- 使用在线地图(必应地图与谷歌地图)

官方下载包路径

1.18.6 下载包在电脑的路径/examples/plugin-examples/bingmaps/bingmaps.html

1.19 pr10 下载包在电脑的路径/viewer/examples/googlemaps/index.html

提示:如果不明白下载包路径是什么,请查看 循序渐进(3)- krpano下载包的使用说明

 

在线演示

krpano 1.18 版本

krpano 1.19 版本

 

krpano 1.19 pr6-pr10 用法

默认皮肤使用地图

krpano官方有必应地图谷歌地图两个插件,用户只需要简单设置就能快速调用在线地图,使用在线地图的强大功能加强漫游体验。打开tour.xml,可以看到skin_settings设置的前5项(1.19版本)。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

第一项maps为是否使用必应地图或谷歌地图。可用的值包括truefalse。true为使用,false为不使用。

第二项maps_type为在html5下选择使用必应地图或是谷歌地图,可使用的值是bing或者google。在krpano中该设定只针对html5端的,因为谷歌地图不提供flash版本,因此在flash内核下默认使用必应地图。

第三项maps_bing_api_key、第四项maps_google_api_key就是你在微软申请的地图api的key和谷歌地图的地图api的key,这个是免费的。

查看微软必应地图申请方式谷歌地图申请方式

第五项maps_zoombuttons是否显示在线地图的缩放按钮,也是truefalse的两个选项。

 

krpano 1.19 pr1-pr5用法

默认皮肤使用地图

krpano官方有必应地图谷歌地图两个插件,用户只需要简单设置就能快速调用地图,使用在线地图的强大功能加强漫游体验。今天简单说一下,如何应用必应地图,最简单的方式就是利用默认皮肤模版的功能。打开tour.xml,一开始就可以看到skin_settings的设定(1.19版本)。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

第一项是否使用必应地图或谷歌地图。可以使用的值包括truefalse

第二项是在html5下是选择使用必应地图或是谷歌地图,可使用的值是bing或者google。在krpano中这个只是针对html5端的,因为谷歌地图不再提供flash版本,因此在flash下默认是使用必应地图。

第三项就是你在微软申请的地图api的key,需要填写,这个是免费的。点击查看具体申请方式

谷歌的地图Javascript api也需要申请密钥。谷歌地图key的申请方法

第四项是否显示在线地图的缩放按钮,也是truefalse的两个选项。

 

默认皮肤的其它相关设置

也就是说如果你要正常使用必应地图,首先要有一个必应地图的key,这个是免费的。第二个你应该购买一个krpano的必应地图插件,官方开发的这个插件功能非常强大。价格是29欧元。在官网的购买页面可以购买,如果你之前已经购买过其他license,你只要选择同样的邮箱,就可以更新自己的license了。
言归正传,这个默认模版的必应地图就是为了使得每个scene都有一个对应的地图点在必应地图上,弹出必应地图的按钮会显示在导航栏左方。我们可以看到在每个scene都有三个属性

点击代码窗口最右侧按钮,在新窗口打开后复制代码

分别是纬度、经度与方位。heading也就是在地图上使用雷达时是有效的。你只要填入对应的数据,就会发现地图上出现对应的点。如果你在拍摄全景时,照片已经有了GPS信息,则使用krpano的droplet生成漫游时,这些信息会自动填充到上述三个属性里。可查看动态GPS热点生成器

 

唯一一个问题是目前谷歌还得翻墙,我们得使用谷歌地图中文版。打开skin文件夹的vtourskin.xml。找到

点击代码窗口最右侧按钮,在新窗口打开后复制代码

改为

点击代码窗口最右侧按钮,在新窗口打开后复制代码

实际上就是加了一句

点击代码窗口最右侧按钮,在新窗口打开后复制代码

这样的话,在html5端,就会调用中国版的api地址了。

flash端可使用chen4490改后的必应地图SWF插件 链接:http://pan.baidu.com/s/1ntiua73 密码:21z2

下载下来的在1.17的插件bingmaps.swf拷贝到vtour下的plugins文件夹。

至此基本上大功告成。

 

如果你要在默认模版上使用更多关于地图的设定,打开skin文件夹中的vtourskin.xml,找到

点击代码窗口最右侧按钮,在新窗口打开后复制代码

这是地图容器的静态代码,在这里定义了容器的位置,以及地图本身的一些基本设置。

skin_map_container是装载地图的容器,skin_map是地图插件本身。

maptypecontrolradar以及spotstyle是地图插件内的子元素。具体用法可以查看 必应地图插件官方说明文档以及谷歌地图插件官方说明文档

skin_map我们看到还有一个

点击代码窗口最右侧按钮,在新窗口打开后复制代码

这里是当地图加载准备好时,在地图上动态添加地图点。

点击代码窗口最右侧按钮,在新窗口打开后复制代码

 

自定义在线地图用法

当然。默认模版的必应地图功能是有限的。我们也可以自定义谷歌地图,例如在官方案例中,对地图的使用是这样的。

你电脑的路径\krpano-1.19-pr10\viewer\examples\googlemaps\googlemaps.xml

点击代码窗口最右侧按钮,在新窗口打开后复制代码

mapcontainer是个普通的容器,不详细说了,你可以理解成一个背景层。然后plugin及其中的radar和spot都是地图自身的属性和元素。如果是你要放在scene元素外,你要加keep属性。

先看看plugin,它和其他插件的写法大同小异,也有url以及html5专属的alturl。key属性就是地图的key。地图的key是对应域名的,因此你用krpano官方的也没有意义,你需要自己申请。。maptype是地图类型,现在是卫星。lat和lng是经纬度,当前地图中心点的经纬度,zoom为地图的缩放级别。
radar的属性与radar的插件的属性基本相似。spot就是每个地图点。

maptype控制是否显示地图类型切换,你可以在卫星和二维地图之间进行切换。

在 “移花接木(3)- 使用在线地图(必应地图与谷歌地图)” 上有 1 条评论

发表评论