Question

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

有没有办法阻止这种情况？我目前正在申请ImageMapType作为叠加层。效果很好，但在缩放时会发生闪烁。

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

这是我应用我的ImageMapType btw的方式：

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 Maps也不是可行的方式。

Answer 1

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

我扩展了OverlayView类来制作我自己的自定义叠加层。此叠加层由单个<div>组成，具有半透明的蓝色：ish颜色。 div是屏幕尺寸* 2，位于屏幕中间。

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

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

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

Answer 2

我必须自己解决这个问题。这个帖子给了我很多关于在哪里看的指针，但是我得到的解决方案与OP略有不同。

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

这是我在coffeescript中的解决方案：

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

在Google Maps v3中制作彩色地图

2 个答案: