Webix集成在线地图

介绍

添加位置网页搜索机制的一种可能性是一个经常被要求的功能。Webix图书馆提供一个简单而优雅的解决方案嵌入到Web应用程序的在线地图。

这个提示会告诉你如何添加流行的网络地图成Webix的只是几行代码的应用程序如谷歌，诺基亚，OpenStreet和Yandex地图。

大厦地图查看

首先，你应该下载的包装器连接你的应用程序的第三方应用程序不直接链接到他们所需要的地图从Webix 开放佣工库。请注意，这些扩展到默认的库包不包括在内。

其次，一旦你下载了必要的代码文件，你应该包括一个链接到它的头的文档部分。例如，嵌入谷歌地图链接：

<script type="text/javascript" src="./googlemap.js"></script>

请注意的是，诺基亚地图需要设置身份验证令牌，同时注册一个诺基亚帐户，你可以得到。

下面的代码片段将实例化一个地图：

webix.ui({
view:"google-map",  / 或“诺基亚地图”，“Yandex的地图”，“开放式地图”
id:"map",
zoom:6,
center:[ 48.724, 8.215 ]
});

所有地图的构造是相同的，不同的只是在地图视图名称。下面的属性定义的地图的初始位置：

 

ID定义组件的唯一ID;

变焦定义如何接近你想成为地球表面;

中心设置在地图的中心。它是一个数组的两个元素（纬度和经度），逗号分隔符。

<!--EndFragment-->

查找地图

一个地图可以被放置到文档主体和取整的可用空间作为上述的代码将执行。另外，也可以嵌入到任何HTML元素或一个Webix窗口的地图。

要渲染成一个HTML元素的地图，提供了一个容器，你的地图，说明所需要的元素的ID：

webix.ui({
container:"mydiv",
../ / 地图配置
});

要添加的地图内Webix 窗口，使用下面的配置来初始化窗口组件。该地图将被放置到窗体：

webix.ui({
view:"window", id:"mapwin",
body:{ ... }, / / 地图配置
head:{....}, / / 工具栏顶部的地方
top:50, left:50,
width:600, height:500 / / 窗口尺寸和定位
}).show();

现在，我们已经得到了一个负责任的地图页面上。在这里你可以检查它的现场演示，请注意，只有Webix在页面上放置一个地图，而在同一时间，你可以使用每个地图的API（例如谷歌地图API）执行各种操作。

结论

Webix地图集成既简单又方便。它需要最少的编码和配置几乎是相同的，针对不同的地图。

 

转载请注明是来自李新IT博客的专栏：http://ilixin.iteye.com/