1

Googleのドキュメントの例のように地図を読み込もうとしていますが、読み込めません。を使ってみresizeましたが、正しく読み込まれません。このマップは、magentoが使用するPrototypeJavaScriptFrameworkでレンダリングされたタブの背後にあります。タブの後ろにない場合は正しくロードされます。

<style type="text/css">
    #map_container { height:500px; width:700px;margin:0;}
</style>
<div id="map_container">
    <div id="map_canvas" style="width:500px;height:500px;"></div>
</div>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true">
</script>
<script type="text/javascript">
    Event.observe( window, "load", function() {
        var myOptions = {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
        ;
        google.maps.event.trigger(map, "resize");
    });
</script>

マップは、マップの大部分をカバーする灰色の部分で表示され、UI要素は完全には初期化されていません。を使ってみgoogle.maps.event.trigger(map, "resize");ましたが、何も起こらないようです。このdivは多くのdivの中にあります。

4

2 に答える 2

3

Magentoの「ProductEdit」に新しいタブ「GMaps」を追加する方法の例（新しいタブ「id」は「product_info_tabs_GMaps」です）

PHP部分

クラスMy_Gmaps_Block_Adminhtml_Tabs_GmapsはMage_Adminhtml_Block_Widget_Formを拡張します

public function __construct() {

  parent::__construct();

  $this->setTemplate('my/gmaps/tabs/gmaps.phtml');

}

/ ............................. /

}

テンプレートパーツ'pwron/ gmaps / tabs / gmaps.phtml'：

<style>#map_canvas {width:100%; height:600px;}</style>
<div class="map" id="map_canvas"></div>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var GMaps = Class.create();
    GMaps.prototype = {       ....................        }
    var gmaps = null;
    function switchGMapsTab(tab){
        if ( tab.tab.container.activeTab.id == 'product_info_tabs_GMaps'){
            if (!gmaps){
                gmaps = new GMaps({});
                gmaps.update();
            }
        }
    }
    varienGlobalEvents.attachEventHandler('showTab', switchGMapsTab);     <script>

トラブルの方法1.作成されたマップ2.タブが表示されました（すべてのタイルが読み込まれるわけではありません）

最良の方法1.タブが表示されました2.作成されたマップ

于 2012-05-31T09:38:43.720 に答える
1

私はあなたと同じ問題を抱えていました。しかし、私はこの単純なコードで解決策を見つけることができました。

まず、タブテンプレートを配置したファイルに移動し、<li>マップタブを読み込むタグを検索して、次の場所に配置します。

<li onclick="reloadmap()">

そして、直後のマップスクリプトで

google.maps.event.addDomListener(window, 'load', initialize);

これを置く：

function reloadmap(){
  //when you resize the map, you lose your zoom and your center
  //so you need to get them again here
    z = map.getZoom();
    c = map.getCenter();
    google.maps.event.trigger(map, 'resize');
  //and set them again here
    map.setZoom(z);
    map.setCenter(c);
}
于 2015-03-29T14:53:05.430 に答える