`
呼延浩云
  • 浏览: 85016 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
69e5c1d2-1364-320a-a0f2-0de5143310d8
互联网的那点事
浏览量:10994
社区版块
存档分类
最新评论

Webix集成在线地图

阅读更多

介绍

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

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

大厦地图查看

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

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

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

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


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

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/

1
0
分享到:
评论

相关推荐

    WebIX4.3开发手册

    5. **易于集成**:WebIX可以无缝集成到现有的HTML和CSS结构中,也可以与其他前端框架如Angular、React或Vue.js协作,提供了良好的灵活性。 6. **API友好**:WebIX提供了丰富的API和事件系统,使得开发者可以通过...

    meteor-webix, Meteor.js Webix用户界面集成.zip

    meteor-webix, Meteor.js Webix用户界面集成 Meteor.js-- Webix用户界面集成integrating integrating Meteor.js integrating最好的完整堆栈JavaScript框架( 请参见 。) 和 Webix插件,最好是最好的UI部件库

    WebIX5.1开发手册

    WebIX5.1开发手册是针对Xb软件公司推出的JavaScript UI库的应用指南,该库专为构建交互式Web应用程序设计。Webix是一个强大的工具,它集合了80多个可高度定制的组件,允许开发者轻松创建功能丰富的用户界面,同时与...

    webix资源下载

    Webix提供了简单的服务端集成控件,PHP、 ASP.NET、Java和 Ruby等各种技术都可以跟客户端的Webix部件直接通讯。此外这些组件还能用在一些MVC框架中,比如RoR、ASP.NET MVC、Spring、Struts 和 Grails.

    webix-meteor-mvc:Webix-Meteor 集成示例

    Webix-Meteor 集成示例 此示例显示了如何将 Meteor 堆栈与 Webix UI 一起使用 如果您想查看更“经典”的 Meteor 和 Webix 集成方法,请查看 执照 Webix 是在 GPLv3 许可下发布的。 所有其他代码都是在 MIT 许可证下...

    webix3.0下载

    这个文件可能还包含与系统需求、兼容性以及与其他库的集成相关的提示。 4. **codebase**:这是Webix的核心代码库,包含了所有UI组件、主题和核心功能。开发者可以在这个目录下找到需要引入项目的JavaScript和CSS...

    webix.trial.zip

    Webix的优势在于其轻量级、高性能的特性,它支持多种数据源(如JSON、Ajax、CSV等),并且与jQuery、React、Angular等流行库无缝集成。此外,Webix提供了一套完整的主题系统,允许你轻松改变应用的视觉风格,以适应...

    webix最新版CHM文档手册

    前端框架webix用户手册 ...

    webix英文手册API

    webix目前使用的人好像不多,但它是一款挺好用JavaScript UI 库,写法有点类似extJS,但可以构建跟HTML5 和 CSS3 兼容的程序。此为webix API

    叫板EasyUI的下一代UI产品:Webix Pro V3.3.1.7

    5. **集成jQuery**:虽然Webix Pro本身不依赖jQuery,但为了兼容性,它支持与jQuery库一起使用,使得那些熟悉jQuery的开发者能够无缝过渡。 6. **主题和样式**:Webix Pro提供多种预设主题,并且支持自定义CSS样式...

    webix ui框架

    Webix UI框架是一款强大的JavaScript库,专为构建现代、响应式的Web应用程序而设计。它提供了大量的预定义组件和模板,可以快速地搭建出交互丰富的用户界面。Webix框架以其高效性能、灵活定制和广泛的功能集著称,...

    webix文档CHM

    webix 前端JS框架 chm 文档 webix 4.3

    webix数据表格锁列-翻页-统计示列

    Webix是一个强大的JavaScript库,用于构建富客户端应用,特别是数据驱动的用户界面。在Webix中,数据表格(DataTable)是其核心组件之一,能够轻松处理大量数据并提供丰富的交互功能。本文将深入探讨如何利用Webix...

    webix_v50.chm最新版的webix用户参考手册

    webix_v50.chm 官方最新文档 新加了一些功能 需要的同学可以在手册里面查找

    webix用户手册

    前端框架webix用户手册,需要的童鞋可以下载下来。很好用的手册,webix前期学习可能有点困难,但是后期开发会越来越快。

    webix-meteor-mvc:Webix-Meteor集成示例

    Webix-Meteor集成的示例。 重写具有FlowRouter支持的示例 本示例说明了如何将Meteor堆栈与Webix UI一起使用如果要检查流星和Webix集成的更“经典”方法,请检查执照Webix是根据GPLv3许可发布的。 所有其他代码均根据...

    【全网首发】叫板EasyUI的下一代UI产品:Webix Pro V4.2.0

    Webix Pro V4.2.0 是一款备受瞩目的前端用户界面库,它以其卓越的性能和丰富的组件库,挑战了老牌的EasyUI在市场上的地位。作为新一代的UI产品,Webix Pro不仅在代码效率和运行速度上超越了EasyUI,而且提供了更多...

    webix-meteor-example:Webix-Meteor 集成示例

    Webix-Meteor 集成示例此示例使用原生 Meteor 功能,当您只需要向现有 Meteor 应用程序添加一些 Webix 控件时,这是推荐的方法。目前已实施Meteor 集合和 Webix 数据组件之间的数据同步在 Webix UI 中使用 Meteor ...

    Practical Webix Learn to Expedite and Improve your Web Development epub

    Practical Webix Learn to Expedite and Improve your Web Development 英文epub 本资源转载自网络,如有侵权,请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书

Global site tag (gtag.js) - Google Analytics