Question

我尝试更改Google地图概述地图中的蓝色矩形的颜色（位于Google地图窗口的右下方区域）。不幸的是，在谷歌地图v3的文档中没有任何关于这一点。你有什么想法吗？

Answer 1

无法通过API为任何颜色着色。

您可以做什么：使用JS查找元素，然后使用CSS来应用颜色。

示例：

google.maps.event.addListenerOnce(map,'tilesloaded',function()
        {
          try{
            var x=document.querySelector('img[src=\'http://maps.gstatic.com/mapfiles/mapcontrols3d7.png\']');
            if(x)
            {
              x.parentNode.parentNode.previousSibling.className="overviewMap";
              var y=document.querySelectorAll('.overviewMap>div>div>div>div>div>div');
              y[1].className="overviewMapRectangle";
            }
          }catch(e){}
        }
        );

唯一看似独特的是图像（http://maps.gstatic.com/mapfiles/mapcontrols3d7.png），它是用于打开/关闭overviewMap的箭头。脚本搜索该图像并遍历DOM以查找矩形。它将向矩形（overviewMapRectangle）添加一个类，它可以用作选择器。

采样CSS：

.overviewMapRectangle + div > div{border:none !important}
.overviewMapRectangle div{border-color: inherit !important}
/*border-color of the rectangle*/
.overviewMapRectangle{border-color: yellow !important}    
/*background-color of the rectangle*/
.overviewMapRectangle>div>div{background: red !important}

演示：http://jsfiddle.net/doktormolle/ULmW5/

问题：谷歌明天可能会改变地图的DOM，它将不再起作用。

如何在总览图（Google Maps v3）中更改矩形的颜色？

1 个答案: