1

我正在尝试按照 Google 文档中的示例加载地图，但它没有加载。我尝试使用resize，但它没有正确加载。此地图位于使用 magento 使用的 Prototype JavaScript 框架呈现的选项卡后面。它不在选项卡后面时正确加载。

<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“产品编辑”中添加新标签“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 回答