0

我尝试将自定义样式分配给 Google 地图小部件。我在目录 /Theme/themename/override/Ip/Internal/Content/Widget/Map/Skin/ 中创建了一个文件我的皮肤文件名：map-styled.php，代码：

    <div
data-maptypeid="<?php echo escAttr($mapTypeId); ?>"
data-zoom="<?php echo escAttr($zoom); ?>"
data-lat="<?php echo escAttr($lat); ?>"
data-lng="<?php echo escAttr($lng); ?>"

<?php if (isset($markerlat)) { ?>
    data-markerlat="<?php echo escAttr($markerlat); ?>"
<?php } ?>

<?php if (isset($markerlng)) { ?>
    data-markerlng="<?php echo escAttr($markerlng); ?>"
<?php } ?>

style="height: <?php echo ($height); ?>; width: <?php echo ($width); ?>;"
data-initialized="0"
class="ipsMap">
</div>
<?php if (ipIsManagementState()) { ?>
    <script>
        if (typeof ipMap !== 'undefined'){
            ipMap.init();
        }
    </script>
<?php } ?>
<script>
var styles = [
  {
    stylers: [
      { hue: "#00ffe6" },
      { saturation: -20 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

map.setOptions({styles: styles});
</script>

我不是程序员，所以代码毫无意义；）我认为答案会帮助许多非程序员：）提前致谢。

4

1 回答 1

0

地图小部件在初始化时触发 ipWidgetMapInit 事件。那时您可以对 gmaps 地图和标记对象进行裁剪。请参见下面的示例。将此 JavaScript 代码添加到单独的文件中。使用 ipAddJs 函数将该文件添加到您的插件或主题中。

$('.ipWidget-Map').on('ipWidgetMapInit', function(e, variables) {
var styles = [
    {
        stylers: [
            { hue: "#ff0000" },
            { saturation: -100 }
        ]
    },{
        featureType: "road",
        elementType: "geometry",
        stylers: [
            { lightness: 100 },
            { visibility: "simplified" }
        ]
    },{
        featureType: "road",
        elementType: "labels",
        stylers: [
            { visibility: "off" }
        ]
    }
];

variables.map.setOptions({styles: styles});

//do any additional modifications to variables.marker
});
于 2014-09-03T08:21:36.663 回答