1 
var layout = Ext.create('Ext.panel.Panel', {
    width: window.innerWidth,
    height: window.innerHeight,
    // title: 'Border Layout', //no title will be blank
    layout: 'border',
    items: [{
        title: 'Message List',
        region: 'south', // position for region
        xtype: 'panel',
        height: 100,
        split: true, // enable resizing
        collapsible: true,
        margins: '0 5 5 5',
        collapsed: true
    }, tree, {
        html: '<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZx1jmE9yB533ED9suD13buyd0pEfmTzI&sensor=false&dummy=.js">
                </script> 
                <script type="text/javascript">
                init();
                function init() {
                var googleMapOptions = 
                {
                center: new google.maps.LatLng(53.5267, -1.13330),
                zoom: 16, 
                mapTypeId: google.maps.MapTypeId.ROADMAP};
                map = new google.maps.Map(document.getElementById("map_canvas"),googleMapOptions);
                }</script>
                <body>
                <div id="map_canvas" style="width:600px; height:400px"></div>
                </body>',
         renderTo: Ext.getBody()
     }],
     renderTo: Ext.getBody()
     // get the body and display Layout at there
});

ExrJSに貼り付けると、Googleマップを読み込めません。なんで？

PS: このページにマーカーを追加したいので、Gmappanel と No Iframe を使用したくありません。

4

1 に答える 1

3

まず、Ext.ux.GMapPanelView の基本的な実装を使用することをお勧めします。

P/S: このページにマーカーを追加したいので、Gmappanel と No Iframe を使用したくありません

コードを見て、マーカーを非常に簡単に追加できます。

 addMarker: function(marker) {
    marker = Ext.apply({
        map: this.gmap
    }, marker);

    if (!marker.position) {
        marker.position = new google.maps.LatLng(marker.lat, marker.lng);
    }
    var o =  new google.maps.Marker(marker);
    Ext.Object.each(marker.listeners, function(name, fn){
        google.maps.event.addListener(o, name, fn);    
    });
    return o;
}

そのため、リスナーを追加することもできます。

コード スニペットで何をしようとしているか (例):

{
  html: '<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZx1jmE9yB533ED9suD13buyd0pEfmTzI&sensor=false&dummy=.js"></script>

  <script type="text/javascript">
  init();

  function init() {
   var googleMapOptions = {
       center: new google.maps.LatLng(53.5267, -1.13330),
       zoom: 16, 
       mapTypeId: google.maps.MapTypeId.ROADMAP};
       map = new google.maps.Map(document.getElementById("map_canvas"),googleMapOptions);
  }
  </script>
  **<body>**
    <div id="map_canvas" style="width:600px; height:400px"></div>
  **</body>**',

 **renderTo: Ext.getBody()**
}

すみません、全然違います。body タグの追加、パネル コンテナーの下にある body へのレンダリングExt.panel.Panel、それ自体がアイテムをレンダリングするなど、ext の内部構造とその動作についてあまり知らないようです。

あなたは、sencha の連中が基本的で非常に単純な ux 実装を介して使用することを提案しているのと同様のことをしようとしています。さらに延長することもできます。

以下をご覧ください。

GMapPanelView の例 では、ソースを見て、googleapis がプラグインされている場所を確認します (必要に応じて、gmap ビューを拡張して非同期にロードできます)。

GMapPanelView ソース コード

例のソース

レイアウト境界線を使用した非常に単純な例を使用しました。西の地域には追加ボタンがあり、それを押してマーカーを追加します。

Gmap の使用法、jsfiddle (単なる例です。実際のコードをこのように記述しないでください)

ソースを見るのを恐れないでください！

幸運を ;）

于 2013-04-25T09:21:07.473 に答える