Как я могу использовать CustomMarker с MarkerClustererPlus?

Question

Я следующий jsFiddle кода

var map; 
    var overlay; 
    function initialize() { 
    var opts = { 
     zoom: 9, 
     center: new google.maps.LatLng(-34.397, 151.644), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), opts); 
     overlay = new CustomMarker(new google.maps.LatLng(-34.345, 151.65), map, "hola", null); 
     var overlay2 = new CustomMarker(new google.maps.LatLng(-34.395, 151.644), map, "hello", null); 
     MC = new MarkerClusterer(map, [], MC_Opc); 
     MARKERS.push(overlay); 
     MARKERS.push(overlay2); 
     MC = new MarkerClusterer(map, MARKERS , MC_Opc); 
} 

google.maps.event.addDomListener(window, "load", function() { 
    initialize(); 
}); 

Я использую MarkerClustererPlus с CustomMarker, но когда я пытаюсь создать кластеры, консоль показывает мне следующее сообщение об ошибке: неперехваченных TypeError: b.getDraggable не является функция.
Как я могу заставить markerCluster работать?

Answer 1

Добавьте .getDraggable метод к вашему CustomMarker:

CustomMarker.prototype.getDraggable = function() { return false; }; 

working fiddle

фрагмент кода:

var MC; 
 
var MC_Opc = { 
 
    gridSize: 50, 
 
    maxZoom: 15 
 
}; 
 
var MARKER; 
 
var MARKERS = []; 
 
// example 
 
var map; 
 
var overlay; 
 

 
function initialize() { 
 
    var opts = { 
 
    zoom: 9, 
 
    center: new google.maps.LatLng(-34.397, 151.644), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), opts); 
 

 
    overlay = new CustomMarker(new google.maps.LatLng(-34.345, 151.65), map, "hola", null); 
 
    var overlay2 = new CustomMarker(new google.maps.LatLng(-34.395, 151.644), map, "hello", null); 
 
    MC = new MarkerClusterer(map, [], MC_Opc); 
 
    MARKERS.push(overlay); 
 
    MARKERS.push(overlay2); 
 
    MC = new MarkerClusterer(map, MARKERS, MC_Opc); 
 
} 
 

 
google.maps.event.addDomListener(window, "load", function() { 
 
    initialize(); 
 
}); 
 

 
function CanvasCrear(texto, height_, div) { 
 
    var context; 
 
    var canvas = document.createElement("canvas"); 
 
    canvas.style.cssText = 'color: Black; background: #ffffff; background: url(data:image/svg+xml; base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmI0NDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ffb442)); background: -webkit-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: -o-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: -ms-linear-gradient(top, #ffffff 0%, #ffb442 100%); background: linear-gradient(to bottom, #ffffff 0%, #ffb442 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffb442", GradientType=0); border-width: 1px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font-family:"Lucida Grande", "Arial", sans-serif; pointer-events: none;'; 
 

 
    var txtWidth; 
 
    txtWidth = canvas.getContext("2d"); 
 
    txtWidth.font = "12px Sans-Serif"; 
 

 
    var width_ = txtWidth.measureText(texto).width; //Calculando el width de la letra 
 
    //console.log(width_); 
 
    //canvas.style.border = "thin solid black"; 
 
    canvas.setAttribute("width", (width_ + "px")); 
 
    canvas.setAttribute("height", (height_ + "px")); 
 

 
    context = canvas.getContext("2d"); 
 
    context.font = "12px Sans-Serif"; 
 

 
    context.fillStyle = "black"; 
 
    context.fillText(texto, 0, 12); 
 

 
    return div.appendChild(canvas); 
 
} 
 

 

 
function CustomMarker(position, map, text, icon) { 
 
    this.latlng_ = position; 
 
    this.text_ = text; 
 
    this.icon = icon; 
 
    // Once the LatLng and text are set, add the overlay to the map. This will 
 
    // trigger a call to panes_changed which should in turn call draw. 
 
    this.setMap(map); 
 
} 
 

 

 
CustomMarker.prototype = new google.maps.OverlayView(); 
 
CustomMarker.prototype.getDraggable = function() { 
 
    return false; 
 
}; 
 
CustomMarker.prototype.draw = function() { 
 
    var me = this; 
 

 
    // Check if the div has been created. 
 
    var div = this.div_; 
 
    if (!div) { 
 
    // Create a overlay text DIV 
 
    div = this.div_ = document.createElement('DIV'); 
 
    // Create the DIV representing our CustomMarker 
 
    div.style.border = "none"; 
 
    div.style.position = "absolute"; 
 
    div.style.paddingLeft = "0px"; 
 
    div.style.cursor = 'pointer'; 
 

 

 
    CanvasCrear(this.text_, 15, div) 
 

 
    google.maps.event.addDomListener(div, "click", function(event) { 
 
     google.maps.event.trigger(me, "click"); 
 
    }); 
 

 
    // Then add the overlay to the DOM 
 
    var panes = this.getPanes(); 
 
    panes.overlayImage.appendChild(div); 
 
    } 
 

 
    // Position the overlay 
 
    var point = this.getProjection().fromLatLngToDivPixel(this.latlng_); 
 
    if (point) { 
 
    div.style.left = point.x + 'px'; 
 
    div.style.top = point.y + 'px'; 
 
    } 
 
}; 
 

 
CustomMarker.prototype.remove = function() { 
 
    // Check if the overlay was on the map and needs to be removed. 
 
    if (this.div_) { 
 
    this.div_.parentNode.removeChild(this.div_); 
 
    this.div_ = null; 
 
    } 
 
}; 
 

 
CustomMarker.prototype.getPosition = function() { 
 
    return this.latlng_; 
 
}; 
 

 

 
function addOverlay() { 
 
    overlay.setMap(map); 
 
} 
 

 
function removeOverlay() { 
 
    overlay.setMap(null); 
 
}

html { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#map_canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.1.2/src/markerclusterer_packed.js"></script> 
 
<script src="http://maps.googleapis.com/maps/api/js?v=3"></script> 
 
<div id="map_canvas" width="300" height="200"></div>