markerclusterer信息窗口

Question

Let me say I am still fairly new to google maps and javascript. 让我说我仍然是相当新的谷歌地图和JavaScript。 i've been mixing together the google store locator tutorial with some other stuff. 我一直在混合谷歌商店定位器教程与其他一些东西。 So far, I am using marker clusterer plus ( link ), basically the same as marker clusterer for google maps api v3 but with some added functionality like mouse overs and stuff like that. 到目前为止，我使用的是标记clusterer plus（链接），与google maps api v3的标记clusterer基本相同，但有一些附加功能，如鼠标悬停和类似的东西。 I'm trying to get an info window to come up when you mouse over a cluster. 当你将鼠标悬停在一个集群上时，我正试图让一个信息窗口出现。

working demo here . 在这里工作演示。 here is my full index code: 这是我的完整索引代码：

    <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Google Maps AJAX + mySQL/PHP Example</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false"
            type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="markerclusterer.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    var map;
    var markers = [];
    var infoWindow;
    var locationSelect; 
    var markerCluster = null;
    var m;
    var p = [];
    var contentString;


    function load() {
      map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(40, -100),
        zoom: 4,
        mapTypeId: 'roadmap',
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
      });
      infoWindow = new google.maps.InfoWindow();
      locationSelect = document.getElementById("locationSelect");
      locationSelect.onchange = function() {
        var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
        if (markerNum != "none"){
          google.maps.event.trigger(markers[markerNum], 'click');
        }
      };
   }

   function searchLocations() {
     var address = document.getElementById("addressInput").value;
     var geocoder = new google.maps.Geocoder();
     geocoder.geocode({address: address}, function(results, status) {
       if (status == google.maps.GeocoderStatus.OK) {
        searchLocationsNear(results[0].geometry.location);
       } else {
         alert(address + ' not found');
       }
     });
   }

   function clearLocations() {
     infoWindow.close();
     for (var i = 0; i < markers.length; i++) {
       markers[i].setMap(null);
     }
     markers.length = 0;
     locationSelect.innerHTML = "";
     var option = document.createElement("option");
     option.value = "none";
     option.innerHTML = "See all results:";
     locationSelect.appendChild(option);
   }

   function searchLocationsNear(center) {
     clearLocations(); 

     var radius = document.getElementById('radiusSelect').value;
     var searchUrl = 'genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
     downloadUrl(searchUrl, function(data) {
       var xml = parseXml(data);
       var markerNodes = xml.documentElement.getElementsByTagName("marker");
       var bounds = new google.maps.LatLngBounds();
       for (var i = 0; i < markerNodes.length; i++) {
         var name = markerNodes[i].getAttribute("name");
         var address = markerNodes[i].getAttribute("address");
         var distance = parseFloat(markerNodes[i].getAttribute("distance"));
         var foodID = markerNodes[i].getAttribute("foodID");
         var restaurantName = markerNodes[i].getAttribute("restaurantName");
         var latlng = new google.maps.LatLng(
              parseFloat(markerNodes[i].getAttribute("lat")),
              parseFloat(markerNodes[i].getAttribute("lng")));

         createOption(name, distance, i);
         createMarker(latlng, name, address, distance, foodID, restaurantName);
         bounds.extend(latlng);
       }
       map.fitBounds(bounds);
       locationSelect.style.visibility = "visible";
       locationSelect.onchange = function() {
         var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
         google.maps.event.trigger(markers[markerNum], 'click');
       };
       var clusterOptions = { zoomOnClick: false }
        var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
        var contentString = 'This is an example';
        var infowindow = new google.maps.InfoWindow({
        content: contentString
        });
        google.maps.event.addListener(markerCluster, "mouseover", function (c) {
            infowindow.open(map,marker);
            //alert(contentString);
          //log("mouseover: ");
          //log("&mdash;Center of cluster: " + c.getCenter());
          //log("&mdash;Number of managed markers in cluster: " + c.getSize());
        });
       // google.maps.event.addListener(markerCluster, "mouseout", function (c) {
          //log("mouseout: ");
         // log("&mdash;Center of cluster: " + c.getCenter());
         // log("&mdash;Number of managed markers in cluster: " + c.getSize());
       // });
      });
    }

    function createMarker(latlng, name, address, distance, foodID, restaurantName) {
      var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + distance + "<br/>" + foodID + ": the food id" + "<br/>" + restaurantName;
      var marker = new google.maps.Marker({
        map: map,
        position: latlng
      });
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
      markers.push(marker);
    }

    function createOption(name, distance, num) {
      var option = document.createElement("option");
      option.value = num;
      option.innerHTML = name + "(" + distance.toFixed(1) + ")";
      locationSelect.appendChild(option);
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request.responseText, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function parseXml(str) {
      if (window.ActiveXObject) {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
      } else if (window.DOMParser) {
        return (new DOMParser).parseFromString(str, 'text/xml');
      }
    }

    function doNothing() {}

    //]]>

function log(h) {
       document.getElementById("log").innerHTML += h + "<br />";
     }

  </script>
  </head>

  <body style="margin:0px; padding:0px;" onLoad="load()"> 
    <div>
     <input type="text" id="addressInput" size="10"/>
    <select id="radiusSelect">
      <option value="25" selected>25mi</option>
      <option value="100">100mi</option>
      <option value="200">200mi</option>
    </select>

    <input type="button" onClick="searchLocations()" value="Search"/>
    </div>
    <div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div>
    <div id="map" style="width: 100%; height: 80%"></div>
    <div id="log"></div>
  </body>
</html>

Basically it comes down to this part, which I may just be putting in the wrong place: 基本上它归结为这部分，我可能只是把它放在错误的地方：

var contentString = 'This is an example';
    var infowindow = new google.maps.InfoWindow({
    content: contentString
    });
    google.maps.event.addListener(markerCluster, "mouseover", function (c) {
        infowindow.open(map,marker);

I thought I was doing the info window correctly, but it isn't coming up. 我以为我正在正确地进行信息窗口，但它没有出现。 I know the mouseover works because the commented out alert works when i test it. 我知道mouseover可以工作，因为当我测试时，注释掉的警报会起作用。 any ideas what I am doing wrong? 我的错误是什么？

Answer 1

infoWindow.Open has two overloads infoWindow.Open有两个重载

 infoWindow.Open(map, marker)
 infoWindow.Open(map)

Since you wanto to add it to a cluster (not a marker) you should use the second one 由于您希望将其添加到群集（而不是标记），因此应使用第二个

You must set the position getting the center of the cluster 您必须设置获得群集中心的位置

google.maps.event.addListener(markerCluster, "mouseover", function (mCluster) {    
    infowindow.content += "<div>Something<\/div>";
    infowindow.setPosition(mCluster.getCenter());
    infowindow.open(map);
});

I know it works because I just did it 我知道它有效，因为我刚刚做到了

google maps api v3 + infoBubble in markerClusterer google maps api v3 + infoBubble在markerClusterer中

Answer 2

Raphael Isidro's solution didn't work for me. Raphael Isidro的解决方案对我不起作用。 Oddly enough, the marker text was empty and it was being positioned at grid (0,0) of my screen. 奇怪的是，标记文本是空的，它被定位在我的屏幕的网格（0,0）。

This worked perfectly for me: 这对我很有用：

var markerCluster = new MarkerClusterer(map, my_markers ,{zoomOnClick: false});
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_);
  iw.close();
  iw.setContent('<h1>Hi this is my Info Window</h1>');
  iw.open(map, info);
});

Working example here: See http://krisarnold.com/2010/10/15/adding-info-windows-to-map-clusters-with-google-maps-api-v3/ 这里的工作示例：请参阅http://krisarnold.com/2010/10/15/adding-info-windows-to-map-clusters-with-google-maps-api-v3/

Answer 3

Below is how I solved that with Google Maps API v3 and Marker Clusterer. 以下是我使用Google Maps API v3和Marker Clusterer解决这个问题的方法。 I've also addes some offset for the infoWindow so that it doesn't open in the center of the cluster, but little bit above of it. 我还为infoWindow添加了一些偏移量，这样它就不会在集群的中心打开，而是在它上面稍微打开一些。

// Define map variables
var map = new google.maps.Map(document.getElementById('mymap', {
  zoom: 9,
  center: {lat: 50, lng: 10}
});
var infoWindow = new google.maps.InfoWindow();
var markerCluster = new MarkerClusterer(map, markers, {zoomOnClick: false});

// Add listener for clusterclick event
markerCluster.addListener('clusterclick', function(cluster) {
  // Optional: Set some offset for latitude,
  // so that the InfoWindow opens a bit above the cluster
  var offset = 0.1 / Math.pow(2, map.getZoom());
  infoWindow.setContent('<div>Some content</div>');
  infoWindow.setPosition({
    lat: cluster.center_.lat() * (1 + offset),
    lng: cluster.center_.lng()
  });
  infoWindow.open(map);
});

Answer 4

you've got infowindow.open(map,marker); 你有infowindow.open(map,marker); but I don't see where you create marker (apart from the local variable in your createMarkers function, which you can't really access at this point). 但是我没有看到你在哪里创建标记（除了你的createMarkers函数中的局部变量，此时你无法真正访问它）。 Shouldn't that be infowindow.open(map,markerCluster); 不应该是infowindow.open(map,markerCluster);

Another suggestion. 另一个建议。 The second parameter is where the infowindow gets anchored to. 第二个参数是infowindow锚定的位置。 However, you don't need it. 但是，你不需要它。 When you create your infowindow, you can set a position property (ie use the same lat/lng as the marker has). 创建infowindow时，可以设置位置属性（即使用与标记相同的lat / lng）。 Then you can just call infowindow.open(map); 然后你可以调用infowindow.open(map);

markerclusterer信息窗口

问题描述

4 个解决方案

解决方案1
10 已采纳 2011-11-16 15:43:20

解决方案2
0 2013-12-19 16:24:48

解决方案3
0 2016-12-22 14:11:56

解决方案4
0 2011-10-04 08:54:37

markerclusterer信息窗口

问题描述

4 个解决方案

解决方案1 10 已采纳 2011-11-16 15:43:20

解决方案2 0 2013-12-19 16:24:48

解决方案3 0 2016-12-22 14:11:56

解决方案4 0 2011-10-04 08:54:37

解决方案1
10 已采纳 2011-11-16 15:43:20

解决方案2
0 2013-12-19 16:24:48

解决方案3
0 2016-12-22 14:11:56

解决方案4
0 2011-10-04 08:54:37