我通过此功能在我的 map 上添加了标记。
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);
}
它在 map 上添加了标记,但我分配给标记的标题没有显示。为什么?
最后,我想要一张 map ,上面有分散的标记和标题。当客户将鼠标悬停在标记上并单击时,还会出现更多详细信息。谢谢。
最佳答案
据我了解,您希望工具提示始终可见。 InfoBox Utility 库可以创建类似的东西。它非常灵活,这也意味着有很多选项可以设置。例如,如果文本太长,它会流到框外(因此需要动态设置宽度)。
文档: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/
查看屏幕截图,如果它是您想要的,请下载 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>
关于javascript - 为什么标记标题不显示在我的 Google Maps API3 应用程序中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9762694/