javascript 为什么标记标题没有显示在我的 Google Maps API3 应用程序中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9762694/
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
Why don't the marker titles show in my Google Maps API3 application?
提问by dangerChihuahua007
I added markers onto my map via this function.
我通过这个功能在我的地图上添加了标记。
markers: an array of Marker objectslocation: a LatLng objectmyMarkerTitle: the desired title for my marker
markers：一组 Marker 对象location：一个 LatLng 对象myMarkerTitle：我的标记所需的标题
// adds new markers to the map.
function addAMarker(location, myMarkerTitle) {
newMarker = new google.maps.Marker({
position: location,
map: map
});
newMarker.setTitle(myMarkerTitle);
markers.push(newMarker);
}
It adds markers on the map, but the titles I assigned to the markers do not show. Why?
它在地图上添加了标记，但我分配给标记的标题没有显示。为什么？
In the end, I want a map with markers scattered about with titles above them. When a client hovers over and clicks on a marker, more details also surface. Thank you.
最后，我想要一张地图，上面有散落的标记，上面有标题。当客户将鼠标悬停在标记上并点击时，更多细节也会浮出水面。谢谢你。
回答by Heitor Chang
From what I understood, you want a tooltip visible at all times. There's the InfoBox Utility library that can create something like that. It's very flexible, which also means there are a lot of options to set. An annoyance, for example, is if the text gets too long it flows outside the box (so the width would need to be set dynamically).
据我了解，您希望工具提示始终可见。InfoBox Utility 库可以创建类似的东西。它非常灵活，这也意味着可以设置很多选项。例如，令人烦恼的是，如果文本太长，它会流到框外（因此需要动态设置宽度）。
Doc: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.htmlDownload: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/
文档：http: //google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html下载：http: //google-maps-utility-library-v3.googlecode.com /svn/trunk/infobox/src/
See the screenshot, if it's what you want, download infobox_packed.js and try the code below.
看截图，如果这是你想要的，下载 infobox_packed.js 并尝试下面的代码。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="infobox_packed.js"></script>
<script type="text/javascript">
var map;
var mapOptions = {
center: new google.maps.LatLng(0.0, 0.0),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var count = 0;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function (event) {
addMarker(event.latLng, "index #" + Math.pow(100, count));
count += 1;
});
}
function addMarker(pos, content) {
var marker = new google.maps.Marker({
map: map,
position: pos
});
marker.setTitle(content);
var labelText = content;
var myOptions = {
content: labelText
,boxStyle: {
border: "1px solid black"
,background: "white"
,textAlign: "center"
,fontSize: "8pt"
,width: "86px" // has to be set manually
,opacity: 1.0
}
,disableAutoPan: true
,pixelOffset: new google.maps.Size(-43, -50) // set manually
,position: marker.getPosition()
,closeBoxURL: ""
,pane: "floatPane"
,enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
回答by fernandosavio
This will not solve your problem but, why you are calling setTitle after creating a new Marker? Code like this:
这不会解决您的问题，但是，为什么在创建新标记后调用 setTitle ？像这样的代码：
var newMarker = new google.maps.Marker{
position: location,
map: map,
title: MyMarkerTitle
}
When you call setTitle the API calls the MVCObject method set, so the code above is the same as:
当你调用 setTitle 时，API 调用了 MVCObject 方法 set，所以上面的代码是一样的：
var newMarker = new google.maps.Marker{
position: location
};
newMarker.setMap(map);
newMarker.setTitle(myMarkerTitle);
this works too:
这也有效：
var newMarker = new google.maps.Marker{ position: location };
newMarker.set("map", map);
newMarker.set("title", myMarkerTitle);
and this:
还有这个：
var newMarker = new google.maps.Marker{ position: location };
newMarker.setValues({ map: map, title: myMarkerTitle });
回答by Eric Bridger
AFAICT your code should work. It works for me. But the title only displays when you hover over the marker. It will not display until then. Your comments make it seem like you misunderstand how titles work. Their display is an onmouseover event. It's also possible that your title string is null or ''.
AFAICT 您的代码应该可以工作。这个对我有用。但标题仅在您将鼠标悬停在标记上时显示。在此之前它不会显示。您的评论使您似乎误解了标题的工作原理。它们的显示是一个鼠标悬停事件。您的标题字符串也可能为空或 ''。
