问题描述

extjs调用百度地图初始化失败，要二次加载

extjs代码

 /*
 * 报警事项处理窗口
 * yening 2015.2.7
 *
 * paras.winTitle:窗口显示的标题
 * paras.width:窗口宽度
 * paras.height:
 *
 */
Ext.ns('Ext.ux.window');
Ext.ux.window.AlarmProcessWnd = function(paras) {
    var me = this;
    var xflwdwUrl = "./xflwdwInfo.do?reqCode=queryXflwdwInfoData";// 消防联网单位信息查询URl
    var xflwdwStaffUrl = "./xflwdwInfo.do?reqCode=queryXflwdwStaffData";// 消防联网单位人员信息查询URl
    var fireAlarmProcessUrl = "./fireAlarm.do?reqCode=updateAlarmProcessState";// 消防联网单位人员信息查询URl
    var processState = 0;
    var eventStore = null;
    // 初始化参数-----------
    Ext.applyIf(paras, {
        width : 1200,
        height : 460,
        winTitle : ''
    });

    // 部门信息--------------
    var deptStore = new Ext.data.Store({
        proxy : new Ext.data.HttpProxy({
            url : xflwdwUrl
        }),
        reader : new Ext.data.JsonReader({
            totalProperty : 'TOTALCOUNT',
            root : 'ROOT'
        }, [ {
            name : 'deptid'
        }, {
            name : 'deptname'
        }, {
            name : 'address'
        }, {
            name : 'remark'
        } ])
    });
    deptStore.on("load", function(dStore) {
        deptPanel.getForm().loadRecord(dStore.getAt(0));
    })
    var deptPanel = new Ext.form.FormPanel({
        id : 'deptPanel',
        height : 100,
        // title:'单位信息',
        // collapsible : true,
        name : 'deptPanel',
        defaultType : 'textfield',
        labelAlign : 'right',
        labelWidth : 80,
        frame : true,
        bodyStyle : 'padding:5 5 0',
        items : [ {
            fieldLabel : '单位名称',
            name : 'deptname',

            readOnly : true,
            allowBlank : true,
            anchor : '99%'
        }, {
            fieldLabel : '地址',
            name : 'address',
            allowBlank : true,
            readOnly : true,
            anchor : '99%'
        }, {
            fieldLabel : '说明',
            name : 'remark',
            allowBlank : true,
            readOnly : true,
            anchor : '99%'
        } ]
    });
    // ---------------------部门人员信息--------------
    var staffStore = new Ext.data.Store({
        proxy : new Ext.data.HttpProxy({
            url : xflwdwStaffUrl
        }),
        reader : new Ext.data.JsonReader({
            totalProperty : 'TOTALCOUNT',
            root : 'ROOT'
        }, [ {
            name : 'name'
        }, {
            name : 'sex'
        }, {
            name : 'type'
        }, {
            name : 'phone1'
        }, {
            name : 'phone2'
        } ])
    });

    var staffCm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), {
        header : '姓名',
        dataIndex : 'name',
        width : 80
    }, {
        header : '性别',
        dataIndex : 'sex',
        width : 40,
        renderer : SEXRender,
        sortable : true
    }, {
        header : '类型',
        dataIndex : 'type',
        width : 100,
        renderer : XFLWDWSTAFFTYPERender,
        sortable : true
    }, {
        header : '联系电话1',
        dataIndex : 'phone1',
        width : 150,
        sortable : true
    }, {
        header : '联系电话2',
        dataIndex : 'phone2',
        width : 200,
        sortable : true
    } ]);

    var staffGrid = new Ext.grid.GridPanel({
        // title : "联系人",
        height : 120,
        // width: 800,
        autoScroll : true,
        region : 'center',
        margins : '3 3 3 3',
        store : staffStore,
        loadMask : {
            msg : '正在加载表格数据,请稍等...'
        },
        stripeRows : true,
        frame : true,
        cm : staffCm
    });

    // ----------------------事项处理Panel--------------------

    var store = new Ext.data.SimpleStore({
        fields : [ 'name', 'code', 'remark' ],
        data : [ [ '误报模板', '001', '该信息是误报，XXX' ],
                [ '确认模板', '002', '火情已确认，XXXX' ] ]
    });

    var processMode = new Ext.form.ComboBox({
        id : 'id_mode',
        hiddenName : 'processMode',
        fieldLabel : '处理模板',
        triggerAction : 'all',
        store : store,
        displayField : 'name',
        valueField : 'code',
        mode : 'local',
        forceSelection : true,
        typeAhead : true,
        resizable : true,
        anchor : '99%',
        emptyText : '请选择'

    });
    processMode.on("select", function(combo, record) {
        var txt = Ext.getCmp("processText");
        var remark = record.get("remark");
        txt.setValue(remark);
    });
    var processForm = new Ext.form.FormPanel({
        name : 'processForm',
        // title : "火警处理",
        labelWidth : 80, // 标签宽度
        frame : true,
        // frame : true, //是否渲染表单面板背景色
        defaultType : 'textfield', // 表单元素默认类型
        labelAlign : 'right', // 标签对齐方式
        bodyStyle : 'padding:5 5 5 5', // 表单元素和表单面板的边距
        items : [ processMode, {
            id : "processText",
            fieldLabel : '处理结果',
            name : 'processText',
            xtype : 'textarea',
            height : 80, // 设置多行文本框的高度
            emptyText : '请填写处理结果相关内容', // 设置默认初始值
            allowBlank : false,
            anchor : '99%'
        }, {
            id : "eventid",
            name : 'eventid',
            fieldLabel : '事件id',
            hidden : true,
            anchor : '99%'
        }, {
            id : "processstate",
            name : 'processstate',
            fieldLabel : '事件处理状态',
            hidden : true,
            anchor : '99%'
        } ]

    });

    var eventItemPanel = new Ext.Panel({
        layout : 'form',
        resizable : false,
        draggable : true,
        closeAction : 'hide',
        modal : true,
        titleCollapse : true,
        maximizable : false,
        buttonAlign : 'right',
        border : false,
        animCollapse : true,
        animateTarget : Ext.getBody(),
        constrain : true,
        items : [ deptPanel, staffGrid, processForm ],
        buttons : [ {
            text : '火警误报',
            iconCls : 'exclamationIcon',
            handler : function() {
                processEventFunction(1);
            }
        }, {
            text : '火警确认',
            iconCls : 'acceptIcon',
            handler : function() {
                processEventFunction(2);
            }
        }, {
            text : '转119',
            iconCls : 'userIcon',
            handler : function() {
                processEventFunction(3);
            }
        }, {
            text : '关闭',
            iconCls : 'deleteIcon',
            handler : function() {
                eventItemWindow.hide();
            }
        } ]
    });

    // -------------------------GIS页面-----------------------
    var GISPanel = new Ext.Panel(
            {
                collapsible : false,
                margins : '3 3 3 3',
                html : '<iframe id="gis" name="gis" src="app/fireAlarm/js/GIS.htm" width="100%" height="100%" frameborder=0 scrolling=auto></iframe>'
            });
    // ----------------------------------------------事项处理窗口-------------------
    // ---
    var eventItemWindow = new Ext.Window({
        title : paras.winTitle,
        layout : 'column',
        width : paras.width,
        height : paras.height,
        closable : true, // 是否可关闭
        closeAction : 'hide',
        maximizable : true,// 最大化
        animateTarget : Ext.getBody(),
        collapsible : true, // 是否可收缩
        border : true,
        modal : true,
        resizable : false,
        draggable : true,
        titleCollapse : true,
        animCollapse : true,
        margins : '3 3 3 3',
        pageY : 20,
        pageX : 50,
        // pageX : document.body.clientWidth / 2 - 420 / 2,
        constrain : true,// 设置窗口是否可以溢出父容器
        items : [ {
            collapsible : true,
            columnWidth : .3,
            AutoHeight:true,
            region : 'west',
            autoScroll : true,
            items : [ eventItemPanel ]
        }, {
            region : 'center',
            columnWidth : .7,
            items : [ GISPanel ]
        } ]
    });

    this.getProcessState = function() {
        return processState;
    };
    /**
     * 显示窗口
     */
    this.showWindow = function(grid) {
        var record = grid.getSelectionModel().getSelected();
        eventStore = grid.store;
        processState = 0;
        if (Ext.isEmpty(record)) {
            Ext.MessageBox.alert('提示', '请先选中要查看的事项');
            return;
        }

        var eventID = record.get("eventid");// 事件ID
        var deptID = record.get("deptid");// 部门ID
        var longitudeInfo = record.get("longitude");
        var latitudeInfo = record.get("latitude");
        deptStore.load({
            params : {
                deptid : deptID
            }
        });
        staffStore.load({
            params : {
                deptid : deptID
            }
        });
        processForm.getForm().reset();
        eventItemWindow.show();
        Ext.getCmp("eventid").setValue(eventID);
        window.frames['gis'].theLocation(longitudeInfo, latitudeInfo);
    }

    /**
     * 获得经度
     *
     */
    function longitude() {
        for (var i = 0; i < deptStore.getCount(); i++) {
            var longitudeRecord = deptStore.getAt(i);
            longitudeInfo = longitudeRecord.get('longitude');
            return longitudeInfo;
        }
    }
    /**
     * 获得纬度
     *
     */
    function latitude() {
        for (var i = 0; i < deptStore.getCount(); i++) {
            var latitudeRecord = deptStore.getAt(i);
            latitudeInfo = latitudeRecord.get('latitude');
            return latitudeInfo;
        }
    }
    /**
     * 事件处理
     */
    function processEventFunction(precessState) {
        if (!processForm.form.isValid()) {
            alert("请填写火警处理结果信息。。。。");
            return;
        }
        update(precessState);
    }

    /**
     * 事件处理
     */
    function update(precessState) {
        var cmpProcessState = Ext.getCmp("processstate");
        cmpProcessState.setValue(precessState);
        processForm.form.submit({
            url : fireAlarmProcessUrl,
            waitTitle : '提示',
            method : 'POST',
            waitMsg : '正在处理数据,请稍候...',
            success : function(form, action) {

                eventItemWindow.hide();
                eventStore.reload();
                form.reset();
            },
            failure : function(form, action) {
                var msg = action.result.msg;
                Ext.MessageBox.alert('提示', '数据修改失败:<br>' + msg);
            }
        });
    }

}

百度地图代码

 <html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{height:500px;width:100%;}
        #r-result{width:100%; font-size:14px;}
        .anchorBL {  display: none;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WQOD7GtcqdZaEDDPVBqdqeYj"></script>
    <title>城市名定位</title>
</head>
<body>
    <div id="allmap"></div>

</body>
</html>
<script type="text/javascript">
function initMap(longitudeInfo, latitudeInfo){
// 百度地图API功能
var new_point = new BMap.Point(longitudeInfo, latitudeInfo);
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new_point,14);
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var marker = new BMap.Marker(new_point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}

    var longitude = 116.331398;
    var latitude = 39.897445;
    initMap(longitude, latitude);

    // 用经纬度设置地图中心点
    function theLocation(longitude, latitude) {

        initMap(longitude, latitude);
    }

</script>