日期:2014-05-16  浏览次数:20846 次

Extjs怎样使用OpenStreetMap
如题,怎样把openStreetMap显示在Extjs写的页面上,求赐教
------解决方案--------------------
这个如果ExtJs没有这样的接口的话,估计不好实现吧,
用现有的框架总是会有制约的。
------解决方案--------------------
其实很简单,将ext对象首先生成到DOM树中,然后再创建地图对象,参数为ext对象.body.dom,进行一些地图设置就好了

下面是一个大概的示例,将openstreetmap生成到EXT.Window对象里面,ext是3.0的

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <title>GMap Window Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
  <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="http://www.openstreetmap.org/assets/application-fdbeb1704cd97b247d0fd7c64d262b59.js"></script>
</head>
<body>
<script type="text/javascript">
    Ext.onReady(function () {
        var button = Ext.get('show-btn'), mapwin,map;
        button.on('click', function () {
            if (!mapwin) {
                mapwin = new Ext.Window({
                    layout: 'fit',
                    title: 'GMap Window',
                    closeAction: 'hide',
                    width: 800,
                    height: 600
                    ,resizable :false
                });
                mapwin.show();

                map = createMap(mapwin.body.dom);    
                var centre = new OpenLayers.LonLat(11.289667987826276, 51.36946561104731),zoom = 17;
                setMapCenter(centre, zoom);
                setMapLayers("C");
            } else
                mapwin.show();
        });
    });
</script>
<input type="button" id="show-btn" value="打开OpenStreetMap" /