使用gmap3自定义信息窗口和标记

Custom InfoWindow and Marker using gmap3

本文关键字：窗口 信息窗 gmap3 自定义 信息 使用      更新时间：2023-09-26

我使用gmap3创建一个包含我指定的信息的InfoWindow的Google地图。它的工作，但我想自定义的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更改为没有箭头和自定义标记的圆角矩形?

我将使用infobox，描述为:

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

然而，它不是基于gmap3的库，从这个意义上说，我认为您需要使用"正常方式"开始初始化信息窗口。谷歌地图API v3 #infowindows"。但是我会推荐infobox，因为我已经有了我想要的infowindow工作和样式。

此外，更重要的是-它有打包和非打包版本，所以你可以完全控制它使用的代码。

查看这些链接:

  • infobox文档
    • <
  • infobox api/gh>版本发布的
编辑:

由于问题也有自定义标记问题，我注意到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的顶部。当然，这是你自己的选择。

欢呼。

我知道这是一个相当老的问题，但我认为我可以根据我最近使用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并构建map

// 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包装类infobox，我可以相应地样式

我不确定这是不是最好的方法——我只是说这对我来说很有效。

下面是JSFIDDLE示例

相关文章：