Question

我正在使用Google Maps V3 API来显示我的地图。

问题：如何为地图着色，比如说蓝色，这样地图图块就会有蓝色，但标记和其他叠加不会？我不希望在地图上使用自定义样式，这将使我快速达到样式化地图的谷歌地图使用限制。

我想添加一个带有不透明度的蓝色多边形，但是当你平移地图时，我想到多边形会移出屏幕。有没有更好的方法来实现这种效果？

Answer 1

添加一个矩形看起来很有说服力，有一个缺陷：当地图放大和缩小时闪烁。我没有彻底测试，但你可能会遇到分层问题，例如，无法点击矩形下方的一行。我记得，标记位于不同的窗格中，因此可以单击。

bounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-84.999999, -179.999999), 
  new google.maps.LatLng(84.999999, 179.999999));

rect = new google.maps.Rectangle({
    bounds: bounds,
    fillColor: "#0000ff",
    fillOpacity: 0.3,
    strokeWeight: 0,
    map: map
});

旁注：我尝试了这样的KML叠加层：

  <ScreenOverlay>
    <name>Dynamic Positioning: Top of screen</name>
    <visibility>0</visibility>
    <Icon>
      <href>http://...blue.png</href>
    </Icon>
    <overlayXY x="0" y="1" xunits="fraction" yunits="fraction"/>
    <screenXY x="0" y="1" xunits="fraction" yunits="fraction"/>
    <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
    <size x="1" y="1" xunits="fraction" yunits="fraction"/>
  </ScreenOverlay>

本来是胜利者，但你无法拖动并滚动地图。

Answer 2

我打算假设您将API嵌入到网页中。如果这是真的你可以将API包装到一个div让我们说然后使用一些CSS用你选择的蓝色填充div并将所述div的不透明度设置为0.4或（40％）。您的代码看起来像这样：

HTML

<div id="mapwrapper">MAP API EMBEDDING CODE</div>

CSS

#mapwrapper{
      opacity:0.4;
      filter:alpha(opacity=40); /* For IE8 and earlier */
      }

引用w3schools.com

我已将它用于网站上的社交媒体/社交网络连接。

再次，如果你是嵌入到一个网站，我会特别询问你的意图，但这件事不会让我发表评论。

Answer 3

我实际上发现自己的解决方案比建议的更好。

我的解决方案也可以防止闪烁。 Check it out in this thread!

Color Tint my Google Map

3 个答案: