1、新建地图:http://www.dhtmlx.com/docs/products/dhtmlxLayout/samples/04_components/12_gmaps.html

2、地图框架效果示例:http://www.dhtmlx.com/docs/products/demoApps/dhtmlxGeo/index.html

3、使用mapView:http://docs.dhtmlx.com/scheduler/map_view.html#localizationtips

4、DHTMLX使用中文讲解:http://blog.itblood.com/dhtmlx-technology-use-summary.html

5、开发小例(谷歌地图为例):

(1)导入插件包文件

<script type="text/javascript" src="${ctx}/res/js/dhtmlxtouch/touchui.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

(2)html标签

<!-- 地图显示 -->
<div id="map" style=" width:100%; height:100%; aborder: #B5CDE4 1px solid;display: none;padding: 0px;margin: 0px;"></div>

(3)配置视图view

var config={
rows : [ {
view : "multiview",
cells:[
// 功能视图----------------- start ----------------------
{
id : "functionView",
rows : [ {
view : "toolbar",
elements : [ {
view : "label",
align : "center",
value : "功能名称",
align : "left"
}, {
view : "button",
value : "功能按钮名称",
click : "doLocate()",
inputWidth : 80,
align : "center"
},{
view : "button",
inputWidth : 80,
value : "页面挑转",
align : "right",
click:"window.location.href='login';"
} ]
}, {
id : "map",
view:"scrollview",
scroll:false,
content:{
height:'100%',
rows:[
{content:"map"}
]
}
} ]
}
]
// 底部菜单栏----------------- start ----------------------
{
view : "toolbar",
id : "bottomBar",
type : "BottomBar",
elements : [ {
view : "toolbar",
elements : [
{view:"imagebutton", id:"left",align : "right",inputWidth:320, src : "../res/images/left.png", click : "showNext('left')"}
]
},{
view : "tabbar",
id : 'tabbar',
align : "center",
width:240,
multiview : true,
options : [ {
label : '功能菜单一',
src : "../res/images/menu/user.png",
value : 'myInfoView'
}, {
label : '功能菜单二',
src : "../res/images/mobile/track.png",
value : 'monitorView'
}, {
label : '功能菜单三',
src : "../res/images/mobile/monitor.png",
value : 'trackView'
}]
},{
view : "toolbar",
elements : [
{view:"imagebutton", id:"right", src : "../res/images/right.png", click : "showNext('right')"}
]
} ] }
// 底部菜单栏----------------- end ----------------------
]
}; dhx.ready(function() {
dhx.ui(config);
// 表单输入事件监听
$$("editMsgForm").attachEvent("onValidationError",function(id,data){
var obj=$$(''+id).getNode();
dhx.notice(obj.textContent+"不能为空");
});
// 数字验证
$$("helpParam").attachEvent("onValidationError",function(id,data){
dhx.notice("只能输入数字");
});
$$("tabbar").attachEvent("onBeforeTabClick", function(button, id) {
if(id=="functionView"){
$$('functionView').show();
//show html元素需要外部提供js的function
showMapDiv();
} return true;
});
}); function showMapDiv(){
$("#map").show();
}

注:有时间可以细细研究一下。

DHTMLX地图开发参考示例摘录的更多相关文章

  1. [转]Net Framework引路蜂地图开发示例

    From:http://www.2cto.com/kf/201207/140421.html 引路蜂地图也提供对.Net Framework平台的支持,可以开发桌面地图应用,由于Mono C#的跨平台 ...

  2. C#的百度地图开发(四)前端显示与定位

    原文:C#的百度地图开发(四)前端显示与定位 有了这些定位信息,那要如何在前端的页面上显示出来呢?这需要用到百度地图的JavaScript的API.下面是示例代码. 前端代码 <%@ Page  ...

  3. android 百度地图开发实例(转载)

    因为在我的寝室google基站定位返回的数据总是为空,所以换成百度地图,发现百度地图开发起来非常方便,提供了许多有用的工具,地图的加载速度也比google地图快许多. 为了加强记忆,写一点androi ...

  4. 百度地图开发-引入地图SDK并配置 02

    百度地图开发-引入地图SDK并配置 02 通过上一篇文章的介绍,基本了解百度地图的基本信息,接下来就让我们一起来实际在项目中操作,显示出地图. 01 引入地图SDK 首先需要新建一个空白的Androi ...

  5. android百度地图开发之自动定位所在位置与固定位置进行驾车,步行,公交路线搜索

    最近跟着百度地图API学地图开发,先是学了路径搜索,对于已知坐标的两点进行驾车.公交.步行三种路径的搜索(公交路径运行没效果,待学习中),后来又 学了定位功能,能够获取到自己所在位置的经纬度,但当将两 ...

  6. JavaEE参考示例 SpringSide 4.0 GA版杀青

    SpringSide是以Spring Framework为核心的,Pragmatic风格的JavaEE应用参考示例,是JavaEE世界中的主流技术选型,较佳实践的总结与演示. 经过漫长的7个月和6个R ...

  7. C#的百度地图开发(三)依据坐标获取位置、商圈及周边信息

    原文:C#的百度地图开发(三)依据坐标获取位置.商圈及周边信息 我们得到了百度坐标,现在依据这一坐标来获取相应的信息.下面是相应的代码 public class BaiduMap { /// < ...

  8. 搜索应用参考示例XXL-SEARCH

    <搜索应用参考示例XXL-SEARCH> 一.简介 1.1 概述 XXL-SEARCH 是以 "lucene/elasticsearch" 为核心的,Pragmatic ...

  9. 调用百度地图开发平台的JavascriptAPI实现将市县位置转换成坐标

    最近的项目要做的地图比较多,有的还比较复杂,而地图用到的坐标,上网找json文件更是良莠不齐的.真是让人伤脑筋,后来突然想到了百度地图开发平台,没想到真的有对应的API哦,谢天谢地!!!下面说一下完整 ...

随机推荐

  1. FFmpeg深入分析之零-基础 <第一篇>

    FFmpeg是相当强大的多媒体编解码框架,在深入分析其源代码之前必须要有基本的多媒体基础知识,否则其源代码会非常晦涩难懂.本文将从介绍一些基本的多媒体只是,主要是为研读ffmpeg源代码做准备,比如一 ...

  2. C# Struct结构体

    C#中结构类型和类类型在语法上非常相似,他们都是一种数据结构,都可以包括数据成员和方法成员. 结构和类的区别: 1.结构是值类型,它在栈中分配空间:而类是引用类型,它在堆中分配空间,栈中保存的只是引用 ...

  3. JQuery中阻止事件冒泡方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation();         $("#div1").mousedown(function( ...

  4. 本人对于JavaScript的一些总结

    类型.值和变量 1.原始类型   数字.字符串和布尔   null空  undefined未定义 2.对象类型 3.类  Array  Function Date RegExp  Error 4.js ...

  5. 实现怎样支持Android重力感应器Sensor编程

    添加当重力变化时的处理函数 在创建监听器时调用的函数 doSomething(x, y, z) 是自己定义的方法. 当手机倾斜方向改变时,监听器会调用该方法. 我们要做的,就是填充该方法,用于在重力发 ...

  6. mysql sql limit where having order

    SQL语句执行顺序及MySQL中limit的用法 . 分类: MySql2013-09-02 09:1315人阅读评论(0)收藏举报 写的顺序:select ... from... where.... ...

  7. sybase用户管理(创建、授权、删除)

    一.登录用户管理:1.创建用户:sp_addlogin loginame, passwd [, defdb] [, deflanguage] [, fullname] [, passwdexp] [, ...

  8. Android图片编译报错

    一. AAPT err(1118615418): ERROR: 9-patch image icon_item_bottom_line.9.png malformed No marked region ...

  9. HDU 4798 - Skycity

    告诉你一幢楼的高度,楼的层数,每层一样高. 每一层的底边是一个圆,下一层的玻璃一定要包括进上一层的底边. 每层玻璃铺成棱柱形,玻璃有最小面积限制. 问你这层楼最小的总玻璃数是多少. 求出每层最小的玻璃 ...

  10. HDU 1088 - Write a simple HTML Browser

    直接看sample input = = 又一道模拟. #include <iostream> #include <string> #include <cstdio> ...