OO JS & Google Maps API: Was mache ich falsch?

Question

Dies ist mein erster Ausflug in OO JS, mit Problemen.

Idealerweise würde ich in diesem Szenario ein mapLocation-Objekt haben, das ich einfach in Koordinaten, Icon, dem HTML-Code übergeben könnte, der beim Klicken angezeigt wird, und das wars. Ich würde es meiner Google Map auf der Seite hinzufügen und ich hätte etwas wiederverwendbares. Offensichtlich würde dies später refaktoriert werden.

Auch bin ich nicht besonders glücklich darüber, wie mein Code im Moment aussieht. :)

Hier ist das Objekt, mit dem ich komme.

function mapLocation() { 

    this.lat = 0; 
    this.lng = 0; 
    this.icon = ''; 
    this.html = ''; 
    this.getLocation = getLocation; 
} 

function getLocation() { 
    var baseIcon = new GIcon(G_DEFAULT_ICON); 
    baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; 
    baseIcon.iconSize = new GSize(20, 34); 
    baseIcon.shadowSize = new GSize(37, 34); 
    baseIcon.iconAnchor = new GPoint(9, 34); 
    baseIcon.infoWindowAnchor = new GPoint(9, 2); 
    var letteredIcon = new GIcon(baseIcon); 
    letteredIcon.image = this.icon; 
    var point = new GLatLng(this.lat, this.lng); 
    var marker = new GMarker(point, { icon:letteredIcon }); 

    function show() { 
     marker.openInfoWindowHtml('Lat: '+this.lat+'<br />Lng: '+this.lng+'<br /><img src="'+this.icon+'" />'); 
    } 
    alert(this.lat); 
    GEvent.addListener(marker, "click", show); 
    return marker; 
} 

Und hier ist meine Implementierung.

var a = new mapLocation; 
a.lat = 52.136369; 
a.lng = -106.696299; 
a.icon = 'http://www.google.com/mapfiles/markerA.png'; 
a.html = 'asdf fdsa'; 

var b = a.getLocation(); 
map.addOverlay(b); 

So bekomme ich Fenster angezeigt, mein Marker, aber show() -Funktion Pop-up mit undefiniert drin.

Ich bin gespannt, was ich falsch mache - wie ich falsch denke - in diesem Problem.

Danke für das Aussehen.

Answer 1

Kann nicht ohne die zusätzlichen Funktionen drin sicher sein, aber ich stelle mir vor, es ist ein 'dieses' Referenzproblem, weil Ihre Show-Funktion keine Schließung erzeugt.

dieses (Edit: Ich bin ein Idiot 'diese' Probleme vergessen): Versuchen

function show() { 
    var x = this; 
    return function(){marker.openInfoWindowHtml('Lat: '+x.lat+'<br />Lng: '+x.lng+'<br /><img src="'+x.icon+'" />');} 
} 

GEvent.addListener(marker, "click", show()); 

Was OOJS ... Kommentare zu erklären:

//convention is to name JS classes with an uppercase character 
function MapLocation(params) 
{ 
    //instantiate from a params object to keep a flexible contructor signature 
    //(similarly you can use the native arguments object but I prefer to be explicit) 
    this.lat = (params.lat ? params.lat : 0); 
    this.lng = (params.lng ? params.lng : 0); 
    this.icon = (params.icon ? params.icon : ''); 
    this.html = (params.html ? params.html : ''); 

    //keep methods contained within the class definition 
    if (typeof(this.geolocation) == 'undefined') //execute once 
    { 
     //by binding methods with prototype you only construct a single instance of the function 
     MapLocation.prototype.getLocation = function() 
              { 
               /* ... */ 
              } 
    } 
} 

//property set at constructor 
var a = new MapLocation({lat:52.136369, lng:-106.696299, icon: 'http://www.google.com/mapfiles/markerA.png'}); 

//deferred property setting 
a.html = 'asdf fdsa'; 

Answer 2

var _this = this; 
    function show() { 
      marker.openInfoWindowHtml('Lat: '+_this.lat+'<br />Lng: '+_this.lng+'<br /><img src="'+_this.icon+'" />'); 
    } 

Denken Sie daran, dass, wenn eine Funktion als Mitglied eines Objekts aufgerufen wird, dieses === Fenster.

Auch eine saubere Art und Weise all dies auszudrücken ist:

function mapLocation() { 
    // constructor stuff 
} 

mapLocation.prototype = { 
    getLocation: function() { 
    // code for getLocation 
    } 
}; 

Dann müssen Sie nicht this.getLocation im Konstruktor zuweisen.