GoogleMapと何らかのサービスをマッシュアップして・・・といった場合にExt JS上で GoogleMapを扱ってみます。
注意!Ext JSのサイトにあるSamples & DemoのページにGoogleMapを表示できるPanelの サンプルがあるのですが、ここからダウンロードできるソースではGoogleMapのコントロールが表示されない 場合があります。(2009/04/21時点)
※センターポジションを緯度経度で指定した場合、コントロールが表示されない場合があります。 addControlsを実行することで回避できるようです。最新版では、解決しています。
ここでは、ext-ux-gmappanelからダウンロードした ソースでViewportにGoogleMapを表示します。
Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif'; // Main application entry point Ext.onReady(function() { // クイックチップスの初期化 Ext.QuickTips.init(); var gmap = new Ext.ux.GMapPanel({ xtype: 'gmappanel', title:'Map View', gmapType: 'map', zoomLevel: 10, mapConfOpts: ['enableScrollWheelZoom','enableDragging'], mapControls: ['GLargeMapControl','GMapTypeControl','GScaleControl'], setCenter: { lat: 35.36497, lng: 138.72985 }, region: 'center' }); var condPanel = new Ext.Panel({ title : '検索条件', split: true, collapsible: true, height: 200, region: 'north' }); var rootPanel = new Ext.Panel({ title : '', region: 'center' }); // ViewPortやPanelを配置 new Ext.Viewport({ layout:'border', items:[{ layout: 'border', id: 'layout-browser', region:'west', border: false, split:true, margins: '2 0 5 5', width: 275, minSize: 100, maxSize: 500, items: [condPanel, rootPanel] }, gmap ] }); });
Copyright 1997-2010 BBB All rights reserved.