私が理解したところでは、ツールチップが常に表示されます。そのようなものを作成できる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>
ありがとうございました!このツールは簡単で、私のニーズを満たしています。 – dangerChihuahua007