Question

我正在使用gmap3创建一个Google地图，其中包含我指定信息的InfoWindow。它工作但我想自定义InfoWindow是一个圆角矩形，没有箭头指向位置和我想在实际位置上自定义标记。

我该怎么做？

（我发现gmap3的文档有点令人困惑。）

这是我目前正在使用的JS：

$("#map").gmap3({
map:{
   options:{
   zoom:18,
   mapTypeControl: true,
   mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
   },
   navigationControl: true,
   scrollwheel: true,
   streetViewControl: true
  }
},
infowindow:{
   address:"Boulder, Colorado",
   options:{
   content: "Text"
  }
 }
});

如何将InfoWindow更改为没有箭头和自定义标记的圆角矩形？

Answer 1

我会使用infobox，其描述为：

此类的行为类似于google.maps.InfoWindow，但它支持高级样式的几个附加属性。 InfoBox可以也可以用作地图标签。

然而，它不是基于gmap3的库，从这个意义上讲，我认为你需要使用“普通方式aka。google maps api v3 #infowindows”来开始初始化信息窗口。但是我会推荐使用信息框，因为我已经让我的infowindows工作并按照我的想法进行设计。

此外，还有更多 - 它带有打包版本而非打包版本，因此您可以完全控制其使用的代码。

查看以下链接：

修改

由于问题还有自定义标记问题，我注意到gmap3支持（但是）传递标记选项的值，因此您可以轻松地自定义它们。（根据您的需要而定。）要简单地更改标记的图标，您可以执行以下操作：

... somewhere within initialization ... marker:{ options:{ draggable: false, icon: "urlToYourImage.png", optimized: false // needed to be false when using images }, ...

但是，如果你在这里问真正的提示;）我建议不要使用gmap3 - 我已经尝试过它并最终交换使用普通的谷歌地图api v3，因为gmap3只会混淆和隐藏代码到谷歌的顶部地图api。但它当然是你的选择。

干杯。

Answer 2

我知道这是一个很老的问题，但我想我可以根据我最近使用gmap3和Google Maps API的经验添加一些输入。

我决定通过绑定标记点击事件来生成叠加层，而不是走下使用infobox库（我发现有点像母马来使用gmap3库）的路线。我可以按照我的要求设计风格。

所以，我的JSON和我的所有地址都是这样的

// JSON
var data = JSON.parse('[
{
    "address":"New Street, Salisbury, UK",
    "content":"hello world from salisbury"
},
{
    "address":"86000 Poitiers, France"    ,
    "content":"hello world from poitiers"
},
{
    "address":"66000 Perpignam, France",
    "content":"hello world from perpignam"
}

]');

我设置了gmap默认值

// Gmap Defaults
$map.gmap3({
    map:{
        options:{
            center:[46.578498,2.457275],
            zoom: 5
        }
    }
});

我遍历我的JSON并构建地图

// Json Loop
$.each(data, function(key, val) {
    $map.gmap3({
        marker:{
            values:[{
                address:val.address,
                events: {
                    click: function() {

                        gmap_clear_markers();

                        $(this).gmap3({
                            overlay:{
                                address:val.address,
                                options:{
                                    content:  '<div class="infobox">'+val.content+'</div>',
                                    offset:{
                                        y:-32,
                                        x:12
                                    }
                                }
                            }
                        });
                    }
                }
            }]
        }
    });
});

gmap_clear_markers()函数会触发要删除的所有其他信息框（叠加）实例。

// Function Clear Markers
function gmap_clear_markers() {
    $('.infobox').each(function() {
        $(this).remove();
    });
}

现在我可以添加尽可能多的地址，因为我想要我的JSON，它将有一个信息框，只有一个带有类信息框的普通div包装器，我可以相应地设置样式。

我不确定这是否是最好的方式 - 我只是说这对我有用。

以下是JSFIDDLE example

使用gmap3自定义InfoWindow和Marker

2 个答案: