jquery - 如何：单击标记时 - 使地图变暗并在地图顶部显示一个大 div 而不是带有信息的信息框

Question

我有一个带有可过滤标记的谷歌地图info-boxes，并包含有关每个标记的简单信息（当您单击它们时），但想知道这是否可能：

当您在标记上时 -地图顶部会出现一个带有选项卡的大图标，click而不是默认选项，该选项卡显示了我将通过JSON（图像、链接、图片）提供的有关标记的所有可能数据。info-boxdiv

您将如何实现此功能？

Answer 1

在添加标记的循环中，添加如下内容：

google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
           ... your code ...
        }
     })
)

在您的代码中，您需要确定地图大小并在顶部放置一个半透明的 DIV，然后在地图的 weapping 元素中显示您自己的 HTML 绝对定位的 DIV。

Answer 2

您还可以在单​​击标记时更改地图样式。

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
       map.set('styles', markerSelectedStyles);
    }
 })

)

您需要创建自己的深色地图版本。

地图样式向导

并创建这样的样式，例如：

var markerSelectedStyles = [ {
"stylers": [
  { "invert_lightness": true }
]}
]