Question

我有一组不同的地图类型（样式）。正如您在简化示例中看到的，我尝试使用onClick事件切换地图类型。

这适用于默认设置 - 由google.maps提供 - 样式。但是当我尝试切换到我的自定义样式时，我有~2-3秒的延迟（本地环境），然后得到一个完全灰色的地图（瓷砖上没有任何东西）。

我知道地图样式本身有效（与链接示例中的不同），因为它是我的初始地图样式。所以只有切换回我的自定义样式才能正常工作。可悲的是，我在控制台中什么都没得到，也不知道如何调试它。

<?php
// Inside the init(); function:
?>
var custom_style = [
     {
         featureType: 'water'
        ,stylers: [
             { hue: "#009ee0" }
            ,{ saturation: 100 }
            ,{ lightness: 0 }
         ]
     }
];
var CUSTOMMAPTYPE = new google.maps.StyledMapType( 
    custom_style, 
    // Options:
    { 
        alt: "Show Custom style",
        name: "custom" 
    } 
);

<?php
// Inside the view
$map_types = array(
     'Roadmap'
    ,'Terrain'
    ,'Satellite'
    ,'Hybrid'
    ,'CustomMapType'
);
foreach ( $map_types as $index => $type )
{
    ?>
    <span 
        class="map-type" 
        onClick="
                my_map.setMapTypeId( google.maps.MapTypeId.<?php echo strtoupper( $type ); ?> );
                // This is funny: I can access all mapType objects without a problem:
                console.log( my_map.mapTypes.<?php echo strtolower( $type ); ?> );
            " 
        id="<?php echo strtolower( $type ); ?>"
    >
        <?php echo $type; ?>
    </span>
    <?php
}
?>

非常感谢任何帮助。

提前致谢

修改

这是我尝试过的其他内容（来自我的init(); fn，为地图设置）：

// The map type control DOM/UI Element
var map_type_controls = document.getElementsByClassName( 'map-type' );

// using jQuery to add a DOM listener function for click events to the UI elements:
jQuery.each( map_type_controls,  function() {
    google.maps.event.addDomListener( this, 'click', function() {
        var control_id = jQuery( this ).attr( 'id' );
        var control = control_id.toUpperCase();

                // uncomment to debug:
                // Shows all map type control DOM element correct
        // console.log( control );
                // Shows all registered mapType objects incl. the custom one correct:
                // console.log( my_map.mapTypes );

        my_map.setMapTypeId( google.maps.MapTypeId[ control ] );

                // Per recommendation - doesn't help
        google.maps.event.trigger( atlas_map, "resize" );
    } ); 
} );

Answer 1

通常当你修改了一个地图的属性时，让我们说一个新坐标或一个缩放，即使你改变了容器（div）的大小，你应该触发一个名为resize的事件，这是唯一的方法为了避免这个问题，现在，我不知道当你改变地图的类型时这是否有效但你应该尝试，代码如下：

    google.maps.event.trigger(map, "resize");

'setMapTypeId'无法使用自定义地图（Google地图）

1 个答案: