javascript Google Maps JS：如何获得悬停时的小工具提示标记和点击时的正常信息窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8071558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps JS: How do I get the small tooltip marker on hover AND the normal info window on click?
提问by CloudMagick
So check any google maps result like this: http://g.co/maps/htdva
所以检查任何谷歌地图结果是这样的：http: //g.co/maps/htdva
If you hover over a marker, you get the tooltip. If you click it you get the big infowindow. I've got the infowindow working just fine via: this stackoverflow answer
如果您将鼠标悬停在标记上，则会获得工具提示。如果你点击它，你会看到大的信息窗口。我已经通过以下方式使信息窗口正常工作：this stackoverflow answer
Here's a picture of both the mini tooltip and the infowindow:
这是迷你工具提示和信息窗口的图片：
Here is a jsFiddle demo: http://jsfiddle.net/3VMPL/
这是一个 jsFiddle 演示：http: //jsfiddle.net/3VMPL/
回答by Steve O'Connor
Set the title property of the marker to the tooltip you want.
将标记的标题属性设置为您想要的工具提示。
var tooltip = "some text";
marker = new google.maps.Marker({map:map, position:position, title:tooltip});
回答by GSof
I think what you want can be found here:
我认为你想要的可以在这里找到：
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
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 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 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);
回答by Nico Prat
You can do it with CSS only, but be warned that it's pretty hacky and can stop working any time if Google changes its markup:
您只能使用 CSS 来完成此操作，但请注意，它非常笨拙，如果 Google 更改其标记，则随时可能停止工作：
.gmnoprint[title] {
overflow: visible !important;
opacity: 1 !important;
}
.gmnoprint[title]:after {
content: attr(title);
/* Style your tooltip */
}