谷歌地图标记工具提示不显示(API v3)

Google Maps Marker Tooltips not showing (API v3)

本文关键字：API v3 显示 地图 图标 工具提示 谷歌      更新时间：2023-09-26

我正在使用Google Maps API v3实现一个带有标记和提示的相当标准的地图。

我试着一步一步来，当我的标记可点击时，我卡住了。我在文档中读到标记默认情况下是可点击的，并且将显示title参数设置为的任何内容。

我成功地在我的地图上显示了我的标记，在预期的位置。但是我不能显示工具提示。标记看起来是可点击的(光标改变)，但是点击它们时什么也没有发生。我应该期望工具提示显示。

这是我的代码，这是我在API文档中找到的一个简单的实现，有一些曲折。

*注:*我通过一个stores JS对象迭代得到我所有的数据。name属性为纯文本。

/*  Show Stores Data on Map
-----------------------------------------------------  */
var center = new google.maps.LatLng( 47.56980820673984, -71.09390248632815 );
function initialize()
{
  var mapOptions = {
  center   : center,
  zoom     : 6,
  mapTypeId   : google.maps.MapTypeId.ROADMAP,
  zoomControl : true,
  disableDefaultUI : true
};
theMap = new google.maps.Map(
  document.getElementById("storemap"), mapOptions );
/*  place markers on the map  */
$.each( stores, function(i,v)
{
  stores[i]['marker'] = new google.maps.Marker(
    {
      position : new google.maps.LatLng( this.coords.lat, this.coords.lng ),
      map      : theMap,
      title    : this.name
    });
});
}
initialize();

你可能误用了Jquery的。each，试试这个:

/*  place markers on the map  */
stores.forEach(function( store ){
  var tmpmarker = new google.maps.Marker(
    {
      position : new google.maps.LatLng( store.coords.lat, store.coords.lng ),
      map      : theMap,
      title    : store.name
    }
  );
  google.maps.event.addListener(tmpmarker, 'click',
    (function(a){ 
      return function(){
        console.log(JSON.stringify(a, null, 2));
      };  
    })(store)
  );
  store['marker'] = tmpmarker;
});

据我所知，当你点击一个标记时，没有默认的弹出窗口。title属性应该在鼠标悬停时显示为工具提示。

多亏了你们，我才意识到我完全误解了文档。

我混淆了tooltip与InfoWindow确实。我的项目需要InfoWindow，工具提示是出现在Marker悬停处的简单文本，而InfoWindow需要自己的构造函数。

谢谢你的帮助

相关文章：