0

我正在使用gmap3创建一个带有我指定信息的 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 更改为没有箭头和自定义标记的圆角矩形？

4

2 回答 2

1

我会使用infobox描述为：

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

但是它不是基于 gmap3 的库，从这个意义上说，我相信您需要使用“正常方式aka.google maps api v3 #infowindows ”开始初始化 infowindow(s)。但我会推荐 infobox，因为我已经让我的 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 的顶部。但它当然是你的选择。

干杯。

于 2013-03-15T21:23:24.630 回答
1

我知道这是一个相当老的问题，但我想我可以根据我最近使用gmap3Google 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 示例

于 2013-09-27T09:43:55.827 回答