0

我在网上搜索了一下，找到了几种解决方案。在 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);

编辑：我正在使用Satellite maps，这意味着 Styled Maps 也不是要走的路。

4

2 回答 2

0

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

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

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

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

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

于 2013-07-14T18:38:51.487 回答
0

只好自己解决这个问题。这个线程给了我很多关于在哪里看的指示，但我得到的解决方案与 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
于 2015-09-29T18:13:47.403 回答