javascript - Google map 标记工具提示未显示 (API v3)

Question

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

我试图一步一步地进行，但当我的标记可点击时我陷入了困境。 我在文档中读到标记默认情况下是可单击的，并且将显示 title 参数设置的任何内容。

我成功地在 map 上的预期位置显示了我的标记。但我无法显示工具提示。标记看起来可单击(光标发生变化)，但单击它们时没有任何反应。我应该期望工具提示会出现。

这是我的代码，它是我在 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();

我错过了什么吗？

Answer 1

您可能误用了 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;
});

据我所知，当您单击标记时没有默认弹出窗口。标题属性应在鼠标悬停时显示为工具提示。