javascript - 面向对象 JS 和谷歌地图 API : What am I doing wrong?

Question

这是我第一次涉足 OO JS，遇到了问题。

理想情况下，在这种情况下，我有一个 mapLocation 对象，我可以只传递坐标、图标、单击时显示的 HTML，仅此而已。我会将其添加到页面上的 Google map 中，这样我就有了一些可重复使用的东西。显然，这将在以后进行重构。

另外，我对我的代码目前的样子不是特别满意。 :)

这是我想出的对象。

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;
}

这是我的实现。

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);

所以我得到窗口显示，我的标记，但是 show() 函数弹出，其中未定义。

我很好奇我在这个问题上做错了什么——我怎么想错了。

感谢您的关注。

Answer 1

不能确定那里没有那些额外的函数，但我想这是一个“this”引用问题，因为您的 show 函数没有创建闭包。

试试这个(编辑:我是个白痴，忘记了“这个”问题):

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());

至于OOJS...注释解释:

//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';