DHTMLX地图开发参考示例摘录

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();
}

 

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