如何在markerclusterer点击打开infowindow

时间：2015-12-17 17:25:49

标签： javascript google-maps markerclusterer

我正在尝试在markerClusterer上打开一个infowindow点击

插件文件包含： - 

(function( $ ){
$.extend({
    mapsearch: function(options){
        options = $.extend({
        map:null,
        searchWhere:null,
        searchWhat:null,
        activeInfowindow:null,
    }, options);

    var markersFeed ={"recordsFiltered":5,"data":[{"id":"19","records":"1","geohash":"dpxpqjc","location":{"minlat":43.493499755859,"minlon":-79.891204833984,"maxlat":43.494873046875,"maxlon":-79.889831542969,"medlat":43.49,"medlon":-79.89}},{"id":"18","records":"1","geohash":"dpxrcqy","location":{"minlat":43.586883544922,"minlon":-79.741516113281,"maxlat":43.588256835938,"maxlon":-79.740142822266,"medlat":43.59,"medlon":-79.74}},{"id":"14","records":"2","geohash":"dpzc2cm","location":{"minlat":43.820343017578,"minlon":-79.061737060547,"maxlat":43.821716308594,"maxlon":-79.060363769531,"medlat":43.82,"medlon":-79.06}},{"id":"16","records":"1","geohash":"dpzc3t4","location":{"minlat":43.840942382812,"minlon":-79.032897949219,"maxlat":43.842315673828,"maxlon":-79.031524658203,"medlat":43.84,"medlon":-79.03}}],"zoom":"10"};

plugin = this;



plugin.markerCombine = function(markers) {
    var index = 0;
    var total = 0;
    for (var i = 0;i < markers.length; i++) {
        console.log(markers[i].records);
        total = parseInt(total) + parseInt(markers[i].records);
        index++;
    }


    return {
        text: total,
        index: index
    };
}


plugin.addMarker=function(lat,lng,records,geohash, map){
    var marker = options.map.addMarker({
        lat: lat,
        lng: lng,
        records: records,
        label:records,
        geohash: geohash,     
    });

    google.maps.event.addListener(marker,'click',function() {
        plugin.markerClick(marker,options.map); 
    });

}



plugin.clearMarkers=function(){
    options.map.markerClusterer.clearMarkers();

    var i = 0,
        l = options.map.markers.length;
    for (i; i < l; i++) {
        options.map.markers[i].setMap(null)
    }
    options.map.markerClusterer.markers = []
    options.map.markers = []; 

}

plugin.bindMapListeners = function(map){

map.addListener(options.map.markerClusterer,'clusterclick', function(cluster){
    plugin.clusterClick(cluster,options.map);   
}); 

}

plugin.clusterClick = function(cluster,map){

    var content = '<div id="iw-container">' +
                '<div class="iw-title">Loading</div>' +
                '<div class="iw-content">' +
                '<br/>Searching<br/>'+
                '</div>' +
              '</div>';
    options.activeInfowindow = new google.maps.InfoWindow();
    var pos = cluster.getCenter();
    options.activeInfowindow.setPosition(pos);
    options.activeInfowindow.setContent(content2);
    options.activeInfowindow.open(map);
}

plugin.mapSearchEvents = function(map){


    google.maps.event.addListener(map.map, 'dragend', function() {

    plugin.search(map);


    }); 
    google.maps.event.addListener(map.map, 'zoom_changed', function() {

    plugin.search(map);
    }); 
}




//retrieve markers for existing bounds and apply
plugin.search =function(map, params){
    //remove existing markers
    plugin.clearMarkers();

    var mapBounds = options.map.getBounds();

    var bounds = {}
    bounds.latMax = mapBounds.getNorthEast().lat();
    bounds.latMin = mapBounds.getSouthWest().lat();
    bounds.lonMax = mapBounds.getNorthEast().lng();
    bounds.lonMin = mapBounds.getSouthWest().lng();

    zoom = options.map.getZoom();


    $.each( markersFeed.data, function( list, blip ) {
        console.log(blip);
    plugin.addMarker(blip.location.medlat,blip.location.medlon,blip.records,blip.geohash, options.map);

    });
    options.map.markerClusterer.setCalculator(plugin.markerCombine);

    plugin.bindMapListeners(options.map);





}


plugin.markerClick = function(marker){
url="/ajaxSearch/searchGeohash/"

    var content = '<div id="iw-container">' +
                '<div class="iw-title">Loading</div>' +
                '<div class="iw-content" id="'+marker.geohash+'">' +
                '<br/>Searching<br/>'+
                '</div>' +
                //'<div class="iw-bottom-gradient"></div>' +
              '</div>';
    options.activeInfowindow = new google.maps.InfoWindow({
        content: content,
        pixelOffset: new google.maps.Size(100,100),

    // Assign a maximum value for the width of the infowindow allows
    // greater control over the various content elements
        maxWidth: 340
    });

    options.activeInfowindow.close();
    options.activeInfowindow.open(options.map,marker);

}





plugin.drawMap =function(lat,lng, target, zoom, params,bounds){
if (options.map !== null) {
options.map.markerClusterer.clearMarkers(); 
}
   map = new GMaps({
    div: target,
    lat: lat,
    lng: lng,
    zoom: zoom,
   scrollwheel: false,
     markerClusterer: function(map) {
        options= {
        zoomOnClick: false, 
        gridSize: 50,
        styles: [{
            height: 39,
            width: 43,
        }],
        }
      return new MarkerClusterer(map, [], options);


    }

    });
    options.map = map;
    //options.map = options.map;
    //console.log(options);
    if(typeof bounds != 'undefined'){
        options.map.fitBounds(bounds);

    }

    //bind info box to popup and get gridsquare bound submit mapsearch



    //full map search
    google.maps.event.addListenerOnce(options.map.map, 'bounds_changed', function() {
    plugin.search();

    });

plugin.mapSearchEvents(options.map);

    return options.map;
}



    return this;



    }
});
})( jQuery );

html： - 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<title>Membawhen</title>
<style>
#homeMap{width:100%; height:400px;}
</style>

</head>

<body >

<div id="homeMap"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=yourkey&sensor=true"></script>
   <script type="text/javascript" src="https://google-maps-utility-library-v3.googlecode.com/svn-history/r287/trunk/markerclusterer/src/markerclusterer.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.21/gmaps.js"></script>    

<script type="text/javascript">

$(document).ready(function () {


var map =  $.mapsearch();
map.drawMap(43.653226,-79.383184, '#homeMap', 9);    
});


 </script>


 </body> 
 </html>

要点击的第一个标记打开正常，但不会打开任何标记的后续点击。

集群infowindows永远不会打开

点击是调用函数（我可以提醒和记录等）但是我无法打开infowindow，在控制台中显示的唯一错误是：

Uncaught TypeError: Cannot read property 'get' of undefined    from infowindow.js

1 个答案:

答案 0 :(得分：0)

我在此行中使用您的代码Uncaught TypeError: Cannot read property 'get' of undefined收到javascript错误：

options.activeInfowindow.open(options.map, marker);

因为options.map是Gmaps对象，而不是google.maps.Map对象。如果我将其更改为options.map.map（这是对google.map.Map对象的引用），则该错误消失并且标记上的InfoWindows可以正常工作。

proof of concept fiddle

当我查看'clusterclick'问题时，如果我改变了这个：

map.addListener(options.map.markerClusterer, 'clusterclick', function(cluster) {
      plugin.clusterClick(cluster, options.map);
});

要：

google.maps.event.addListener(options.map.markerClusterer, 'clusterclick', function(cluster) {
      plugin.clusterClick(cluster, options.map);
});

我收到了一个javascript错误：Uncaught ReferenceError: content2 is not defined。如果我解决了这个问题（通过使用content来定义），我会在标记群集上获得一个InfoWindow。

proof of concept fiddle

如果您希望一次打开一个infowindow，则需要创建一次并根据需要重复使用该标记：

proof of concept fiddle

代码段 

$(document).ready(function() {
  var map = $.mapsearch();
  map.drawMap(43.653226, -79.383184, '#homeMap', 9);
});
(function($) {
  $.extend({
    mapsearch: function(options) {
      options = $.extend({
        map: null,
        searchWhere: null,
        searchWhat: null,
        activeInfowindow: null,
      }, options);
      plugin = this;
      plugin.markerCombine = function(markers) {
        var index = 0;
        var total = 0;
        for (var i = 0; i < markers.length; i++) {
          console.log(markers[i].records);
          total = parseInt(total) + parseInt(markers[i].records);
          index++;
        }
        return {
          text: total,
          index: index
        };
      }
      plugin.addMarker = function(lat, lng, records, geohash, map) {
        var marker = options.map.addMarker({
          lat: lat,
          lng: lng,
          records: records,
          label: records,
          geohash: geohash,
        });
        google.maps.event.addListener(marker, 'click', function() {
          plugin.markerClick(marker, options.map);
        });
      }
      plugin.clearMarkers = function() {
        options.map.markerClusterer.clearMarkers();
        var i = 0,
          l = options.map.markers.length;
        for (i; i < l; i++) {
          options.map.markers[i].setMap(null)
        }
        options.map.markerClusterer.markers = []
        options.map.markers = [];
      }
      plugin.bindMapListeners = function(map) {
        google.maps.event.addListener(options.map.markerClusterer, 'clusterclick', function(cluster) {
          plugin.clusterClick(cluster, options.map.map);
        });
      }
      plugin.clusterClick = function(cluster, map) {
        var content = '<div id="iw-container">' +
          '<h4>Cluster</h4><div class="iw-title">Loading</div>' +
          '<div class="iw-content">' +
          '<br/>Searching<br/>' +
          '</div>' +
          '</div>';
        if (!options.activeInfowindow || !options.activeInfowindow.setContent) {
          options.activeInfowindow = new google.maps.InfoWindow({
            maxWidth: 340
          });
        }
        // options.activeInfowindow = new google.maps.InfoWindow();
        var pos = cluster.getCenter();
        options.activeInfowindow.setPosition(pos);
        options.activeInfowindow.setContent(content);
        options.activeInfowindow.open(map);
      }
      plugin.mapSearchEvents = function(map) {
          google.maps.event.addListener(map.map, 'dragend', function() {
            plugin.search(map);
          });
          google.maps.event.addListener(map.map, 'zoom_changed', function() {
            plugin.search(map);
          });
        }
        //retrieve markers for existing bounds and apply
      plugin.search = function(map, params) {
        //remove existing markers
        plugin.clearMarkers();
        var mapBounds = options.map.getBounds();
        var bounds = {}
        bounds.latMax = mapBounds.getNorthEast().lat();
        bounds.latMin = mapBounds.getSouthWest().lat();
        bounds.lonMax = mapBounds.getNorthEast().lng();
        bounds.lonMin = mapBounds.getSouthWest().lng();
        zoom = options.map.getZoom();
        $.each(markersFeed.data, function(list, blip) {
          console.log(blip);
          plugin.addMarker(blip.location.medlat, blip.location.medlon, blip.records, blip.geohash, options.map);
        });
        options.map.markerClusterer.setCalculator(plugin.markerCombine);
        plugin.bindMapListeners(options.map);
      }
      plugin.markerClick = function(marker) {
        url = "/ajaxSearch/searchGeohash/"

        var content = '<div id="iw-container">' +
          '<h4>Marker</h4><div class="iw-title">Loading</div>' +
          '<div class="iw-content" id="' + marker.geohash + '">' +
          '<br/>Searching<br/>' +
          '</div>' +
          //'<div class="iw-bottom-gradient"></div>' +
          '</div>';
        if (!options.activeInfowindow || !options.activeInfowindow.setContent) {
          options.activeInfowindow = new google.maps.InfoWindow({
            maxWidth: 340
          });
        }
        /* options.activeInfowindow = new google.maps.InfoWindow({
          content: content,
          maxWidth: 340
        }); */
        options.activeInfowindow.setContent(content);
        options.activeInfowindow.close();
        options.activeInfowindow.open(options.map.map, marker);
      }
      plugin.drawMap = function(lat, lng, target, zoom, params, bounds) {
        if (options.map !== null) {
          options.map.markerClusterer.clearMarkers();
        }
        map = new GMaps({
          div: target,
          lat: lat,
          lng: lng,
          zoom: zoom,
          scrollwheel: false,
          markerClusterer: function(map) {
            options = {
              zoomOnClick: false,
              gridSize: 50,
              styles: [{
                height: 39,
                width: 43,
                url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
                anchor: [20, 0],
              }]
            }
            return new MarkerClusterer(map, [], options);
          }
        });
        options.map = map;
        if (typeof bounds != 'undefined') {
          options.map.fitBounds(bounds);
        }
        google.maps.event.addListenerOnce(options.map.map, 'bounds_changed', function() {
          plugin.search();
        });
        plugin.mapSearchEvents(options.map);
        return options.map;
      }
      return this;
    }
  });
})(jQuery);
var markersFeed = {
  "recordsFiltered": 5,
  "data": [{
    "id": "19",
    "records": "1",
    "geohash": "dpxpqjc",
    "location": {
      "minlat": 43.493499755859,
      "minlon": -79.891204833984,
      "maxlat": 43.494873046875,
      "maxlon": -79.889831542969,
      "medlat": 43.49,
      "medlon": -79.89
    }
  }, {
    "id": "18",
    "records": "1",
    "geohash": "dpxrcqy",
    "location": {
      "minlat": 43.586883544922,
      "minlon": -79.741516113281,
      "maxlat": 43.588256835938,
      "maxlon": -79.740142822266,
      "medlat": 43.59,
      "medlon": -79.74
    }
  }, {
    "id": "14",
    "records": "2",
    "geohash": "dpzc2cm",
    "location": {
      "minlat": 43.820343017578,
      "minlon": -79.061737060547,
      "maxlat": 43.821716308594,
      "maxlon": -79.060363769531,
      "medlat": 43.82,
      "medlon": -79.06
    }
  }, {
    "id": "16",
    "records": "1",
    "geohash": "dpzc3t4",
    "location": {
      "minlat": 43.840942382812,
      "minlon": -79.032897949219,
      "maxlat": 43.842315673828,
      "maxlon": -79.031524658203,
      "medlat": 43.84,
      "medlon": -79.03
    }
  }],
  "zoom": "10"
};
#homeMap {
  width: 100%;
  height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.21/gmaps.js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<div id="homeMap"></div>

相关问题
最新问题