在 Google Maps v3 中制作彩色地图答案

【问题标题】：Make a color tinted map in Google Maps v3在 Google Maps v3 中制作彩色地图
【发布时间】：2013-07-14 09:34:04
【问题描述】：

我在网上搜索过，找到了几种解决方案。包括this thread here on SO。但是，所有方法在放大/缩小时都会在屏幕上产生闪烁。

有什么方法可以防止这种情况发生吗？我目前正在应用ImageMapType 作为覆盖。效果很好，但是在缩放时会出现闪烁。

是否有任何其他替代方法可以将颜色应用于地图，而不是其他叠加层（标记等）。

这就是我应用 ImageMapType 的方式：

var overlayTint = new google.maps.ImageMapType({
    getTileUrl: function(tile, zoom) {return 'library/img/maptint.png';},
    tileSize: new google.maps.Size(512, 512),
    opacity: 0.30,
    isPng: true
});
map.overlayMapTypes.insertAt(0, overlayTint);

编辑：我正在使用卫星地图，这意味着样式化地图也不是要走的路。

【问题讨论】：

您是否尝试过使用styled map？
是的。但是我使用的是卫星地图，样式地图不支持。
在您的问题中某处是否说过？也许您可以为您的问题添加更多细节。

标签： javascript google-maps google-maps-api-3 overlay

【解决方案1】：

我找到了一个效果很好的解决方案！

我扩展了OverlayView 类来制作我自己的自定义叠加层。此叠加层由单个<div> 组成，它具有半透明的蓝色：浅色。 div是screensize*2，放在屏幕中间。

两倍大的原因是因为放大/缩小。当您放大时，叠加层会相对调整大小以适合 结束位置。由于结束位置较小，这会在覆盖层周围产生很大的间隙。但是，如果我们把它做成屏幕的两倍大，我们就可以避免这个问题！

作为冰山一角，我们挂钩drag, dragend and center_changed 事件以将此 div 重新定位到屏幕中心。这样可以确保当用户平移时，叠加层也保持在原位。

希望这可以帮助其他人。感谢您的阅读！

【讨论】：

【解决方案2】：

只需要自己解决这个问题。这个线程给了我很多关于在哪里看的指示，但我得到的解决方案与 OP 略有不同。

我改为在 Lat/Lng 的边界处创建了一个叠加层，即 -90、-90 到 90 90。叠加层还是一个简单的 div，背景设置为 rgba 颜色。

这是我在咖啡脚本中的解决方案：

gm = google.maps
center = new gm.LatLng 50, 0
class colorOverlay extends gm.OverlayView
  constructor: (@color, @map) ->
    @div = null
    @setMap @map
    @bounds = new gm.LatLngBounds(new gm.LatLng(-90, -90), new gm.LatLng(90, 90))
  onAdd: () ->
    col = document.createElement 'div'
    col.style.width = '100%'
    col.style.height = '100%'
    col.style.position = 'absolute'
    col.style.background = @color

    @div = col
    panes = @getPanes()
    panes.overlayLayer.appendChild(@div)
  draw: () ->
    # Overlay Projection
    oP = @getProjection()

    sw = oP.fromLatLngToDivPixel @bounds.getSouthWest()
    ne = oP.fromLatLngToDivPixel @bounds.getNorthEast()

    div = @div
    div.style.left = sw.x + 'px'
    div.style.top = ne.y + 'px'
    div.style.width = (ne.x - sw.x) + 'px'
    div.style.height = (sw.y - ne.y) + 'px'



map = new gm.Map mapElem,
            zoom: 10
            mapTypeId: google.maps.MapTypeId.HYBRID
            center: center
marker = new gm.Marker
               position: center
               map: map
               title: "Hello World!"

overlay = new colorOverlay 'rgba(37,41,56,0.6)', map

【讨论】：