Question

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

理想情况下，在这种情况下，我会有一个mapLocation对象，我只能传递坐标，图标，HTML以便在点击时显示，就是这样。我将它添加到我在页面上的谷歌地图上，我有一些可重复使用的东西。显然这会在以后重构。

另外，我对我的代码目前的处理方式并不特别满意。：）

这是我想出的目标。

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

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

请记住，除非将某个函数作为对象的一个成员调用，否则这个=== window。

此外，表达所有这一切的更简洁方法是：

function mapLocation() {
   // constructor stuff
}

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

然后您不必在构造函数中分配this.getLocation。

Answer 2

如果没有那些额外的功能，不能确定，但我想这是一个'这个'参考问题，因为你的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';

OO JS＆amp; Google Maps API：我做错了什么？

2 个答案: