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. 在一个exe文件中查找指定内容,找到则返回起始位置, 否则返回0

    //在一个exe文件中查找指定内容,找到则返回起始位置, 否则返回0//如果某字符串, 直接传入字符串进来//如果要查找16进制,则用如下格式传参进来: #$1A#$2A#$3A function F ...

  2. < IOS > 文件中 某个类设置ARC,或者非ARC

    用-fno-objc-arc标记来禁用在ARC工程那些不支持ARC的文件的ARC用-fobjc-arc标记启用非ARC工程中支持ARC的文件 项目targets -> build phases ...

  3. app行业发展趋势

    近日,移动开放平台发布了2014年第一季度App开发行业报告.报告中对目前国内app开发者的分布情况,个人开发者和企业开发者的开发领域,相应比例以及提交应用过程中出现的问题做出统计,为如何建立一个更好 ...

  4. 给ie浏览器添加推荐浏览器提示

    <script type="text/javascript"> var isIE = !!window.ActiveXObject; var isIE6 = isIE ...

  5. k-d Tree in TripAdvisor

    Today, TripAdvisor held a tech talk in Columbia University. The topic is about k-d Tree implemented ...

  6. 关闭ubuntu apport

    apport就是ubuntu上的"crash report"服务,就是当有程序崩溃时弹出的那个发送error report的程序: 个人觉得此功能无用,本着给我的老本子节省资源的思 ...

  7. convertView

    [convertView] 参考:https://zhidao.baidu.com/question/423895201122905772.html

  8. 追加addclass和removeclass

    //addclass             Base.prototype.addclass=function(classname){                 for(var i=0;i< ...

  9. css权重计算

    第一等:代表内联样式,如: style=””,权值为1000.    第二等:代表ID选择器,如:#content,权值为100.    第三等:代表类,伪类和属性选择器,如.content,权值为1 ...

  10. Intent中的重要属性详解

    Intent中的四个重要属性主要有四个,分别是Action.Data.Category.Extras. Intent作为联系各Activity,BroadcaseReciver,Service之间的纽 ...