Google Maps JS：如何在悬停时获得小工具提示标记，在点击时获得正常信息窗口？答案

【问题标题】：Google Maps JS: How do I get the small tooltip marker on hover AND the normal info window on click?Google Maps JS：如何在悬停时获得小工具提示标记，在点击时获得正常信息窗口？
【发布时间】：2011-11-09 20:55:32
【问题描述】：

因此请检查任何类似这样的谷歌地图结果：http://g.co/maps/htdva

如果您将鼠标悬停在标记上，您会看到工具提示。如果你点击它，你会得到很大的信息窗口。我的信息窗口工作得很好：this stackoverflow answer

这是迷你工具提示和信息窗口的图片：

这是一个 jsFiddle 演示：http://jsfiddle.net/3VMPL/

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

将标记的标题属性设置为您想要的工具提示。

var tooltip = "some text";
marker = new google.maps.Marker({map:map, position:position, title:tooltip});

【讨论】：

恐怕我不知道你想在这里做什么。你介意分享一个 jsFiddle：jsfiddle.net/3VMPL
您会在鼠标悬停时弹出一个带有文本的标记框。我在这里编辑了你的jsfiddle.net/so1connor/APTYA
谢谢，但我不是在谈论标准的 html 标题工具提示。请查看 OP 中的附加图片... Dairy Queen 工具提示是我感兴趣的（查看此链接：g.co/maps/htdva）。在更多地探索谷歌地图之后，似乎这可能不是地图 API 的一部分，但他们正在实现另一个工具提示 js

【解决方案2】：

我想你想要的可以在这里找到：

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

【讨论】：

请在此处添加代码的相关部分，因为将来可能会出现链接...
@Naruto 确定我现在已经使用 Google 地图文档中提供的代码编辑了我的评论 :)

【解决方案3】：

您可以仅使用 CSS 来实现，但请注意，如果 Google 更改其标记，它会非常麻烦，并且可能随时停止工作：

.gmnoprint[title] {
  overflow: visible !important;
  opacity: 1 !important;
}

.gmnoprint[title]:after {
  content: attr(title);
  /* Style your tooltip */
}

【讨论】：