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();
}
注：有时间可以细细研究一下。