我有一组不同的地图类型(样式)。正如您在简化的示例中看到的,我尝试用onClick事件切换映射类型。
这对于默认的google来说非常有用。地图提供-样式。但是当我尝试切换到自定义样式时,我有大约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
}
?>
任何帮助都非常感谢。
Thanks in advance
编辑:
这是我尝试过的其他东西(从我的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" );
} );
} );
通常情况下,当你修改地图的属性,让我们说一个新的坐标或缩放,即使你改变容器(div)的大小,你应该触发事件称为resize
这是唯一的方法来避免这个问题,现在,我不知道如果这工作,当你改变地图的类型但你应该尝试,代码它是如下:
google.maps.event.trigger(map, "resize");