Google maps 使用Google Maps v3为聚集标记创建信息窗口
我正在开发一个地图，该地图将针聚集在一起，以防止针过度拥挤，但我想创建一个信息窗口，当我单击标记时，它将列出所有标记，我试图获得一些帮助，发现我可以使用marker.getTitle（）来做这件事，但这对我没有帮助，因为我使用的是makrewithLable对象，而不是标题，我的问题是为什么要在标记中添加标题，或者我更喜欢使用标签来在信息窗口中列出它们。 这是我的作品Google maps 使用Google Maps v3为聚集标记创建信息窗口,google-maps,label,Google Maps,Label,我正在开发一个地图，该地图将针聚集在一起，以防止针过度拥挤，但我想创建一个信息窗口，当我单击标记时，它将列出所有标记，我试图获得一些帮助，发现我可以使用marker.getTitle（）来做这件事，但这对我没有帮助，因为我使用的是makrewithLable对象，而不是标题，我的问题是为什么要在标记中添加标题，或者我更喜欢使用标签来在信息窗口中列出它们。 这是我的作品 google.setOnLoadCallback(initialize); var globalMarker = []; var
google.setOnLoadCallback(initialize);
var globalMarker = [];
var map;
function initialize() {
var center = new google.maps.LatLng(45.4214, -75.6919);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
var infowindow = new google.maps.InfoWindow();
for(i=0; i<50; i++) {
var latLng = new google.maps.LatLng(center.lat() + Math.random() - 0.5, center.lng() + Math.random() - 0.5);
//var latLng = new google.maps.LatLng(45.4214, -75.6919)
markers[i] = new MarkerWithLabel({
position: latLng,
draggable: true,
raiseOnDrag: true,
map: map,
labelContent: "Marker ID = "+i,
labelAnchor: new google.maps.Point(30, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
markers.push(markers);
makeDiv(i, 15, "Marker #");
google.maps.event.addListener(markers[i], 'click', function(e) {
infowindow.setContent('Marker postion: ' + this.getPosition());
infowindow.open(map, this);});
}
var clusterOptions = { zoomOnClick: false }
var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
globalMarker = markers.slice();
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var content = '';
// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
//----
//Get markers
var markers = cluster.getMarkers();
var titles = "";
//Get all the titles
for(var i = 0; i < markers.length; i++) {
titles += markers[i].getTitle() + "\n";
}
//----
infowindow.close();
infowindow.setContent(titles); //set infowindow content to titles
infowindow.open(map, info);
});
}
function makeDiv(index, zoomLevel, content) {
document.getElementById("sidebar").innerHTML += '<div onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' ' + index + '</div>';
}
function zoomIn(index, zoomLevel) {
map.setCenter(globalMarker[index].getPosition());
map.setZoom(zoomLevel);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.setOnLoadCallback（初始化）；
var globalMarker=[]；
var映射；
函数初始化（）{
var center=newgoogle.maps.LatLng（45.4214，-75.6919）；
map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
中心:中心,，
禁用双击缩放：真，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var标记=[]；
var infowindow=new google.maps.infowindow（）；
对于（i=0；i的关键更改是titles+=markers[i].labelContent+“\n”
（您可以使用点表示法或markers[i][“labelContent”]
引用您设置的任何属性）。我还更改了零件标记。按下（标记）
，当缩放更改时，窗口将消失（因为集群号可能会改变）其他一切看起来都很棒
html，body，#map{margin:0；padding:0；height:100%}
.标签{
颜色：红色；
背景色：白色；
字体系列：“Lucida Grande”，“Arial”，无衬线；
字体大小：10px；
字体大小：粗体；
文本对齐：居中；
宽度：90px；
边框：2件纯黑；
空白：nowrap；
}
var globalMarker=[]；
var映射；
函数初始化（）{
var center=newgoogle.maps.LatLng（45.4214，-75.6919）；
map=new google.maps.map（document.getElementById（'map'）{
缩放：3，
中心:中心,，
禁用双击缩放：真，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var标记=[]；
var infowindow=new google.maps.infowindow（）；
对于（i=0；i你是说添加标题
？你是说你的标记的红色标签不在那里吗？我测试了你的代码，没问题。你在JS控制台中出错了吗？还有一个标题
选项，它是一个悬停工具提示，也许这就是你想要的？没有，红色标签在那里，但我想添加像var marker=new这样的标题google.maps.Marker（{position:mylatng，title:“Hello World！”}）；因为我希望能够读取集群下的所有标记，并将它们添加到信息窗口中，如：var titles=“”；//获取（var I=0；I<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map { margin: 0; padding: 0; height: 100% }
.labels {
color: red;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
width: 90px;
border: 2px solid black;
white-space: nowrap;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn-history/r315/trunk/markerwithlabel/src/markerwithlabel_packed.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript">
var globalMarker = [];
var map;
function initialize() {
var center = new google.maps.LatLng(45.4214, -75.6919);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
var infowindow = new google.maps.InfoWindow();
for(i=0; i<50; i++) {
var latLng = new google.maps.LatLng(center.lat() + Math.random() - 0.5, center.lng() + Math.random() - 0.5);
//var latLng = new google.maps.LatLng(45.4214, -75.6919)
marker = new MarkerWithLabel({
position: latLng,
draggable: true,
raiseOnDrag: true,
map: map,
labelContent: "Marker ID = "+i,
labelAnchor: new google.maps.Point(30, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
markers.push(marker);
makeDiv(i, 15, "Marker #");
google.maps.event.addListener(markers[i], 'click', function(e) {
infowindow.setContent('Marker postion: ' + this.getPosition());
infowindow.open(map, this);});
}
var clusterOptions = { zoomOnClick: false }
var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
globalMarker = markers.slice();
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var content = '';
// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
//----
//Get markers
var markers = cluster.getMarkers();
var titles = "";
//Get all the titles
for(var i = 0; i < markers.length; i++) {
titles += markers[i].labelContent + "\n";
}
//----
infowindow.close();
infowindow.setContent(titles); //set infowindow content to titles
infowindow.open(map, info);
google.maps.event.addListener(map, 'zoom_changed', function() { infowindow.close() });
});
}
function makeDiv(index, zoomLevel, content) {
document.getElementById("sidebar").innerHTML += '<div onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' ' + index + '</div>';
}
function zoomIn(index, zoomLevel) {
map.setCenter(globalMarker[index].getPosition());
map.setZoom(zoomLevel);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
<div id="sidebar"></div>
</body>
</html>