Проблема Javascript Scope при использовании Google Maps API

Question

Эй, я дурачусь с API карт Google, и в настоящее время я изо всех сил пытаюсь реализовать что-то, что, я думаю, было бы довольно простым.

Мой друг хочет иметь одну из этих карт посетителейвещи на его сайте, где посетители могут добавить маркер в любую точку на карте, и с каждым маркером будет информация, связанная с ним.Такая информация, как имя, дата, сообщение и т. Д. *

В данный момент я нахожусь на стадии создания прототипа и обучения, но у меня возникают проблемы при сопоставлении infowindow с marker объектом.

var map;
var markers = []
function init(){
        var latlng = new google.maps.LatLng(-44, 140);
        var myOptions = {
                zoom:8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


        google.maps.event.addListener(map, 'click', function(event){
            markers.push(new marker(event.latLng));
        });
}

function marker(location){
    this.location = location;
    this.mark = new google.maps.Marker({position:this.location, map:map});
    this.info = new google.maps.InfoWindow({content:'hi'});
    google.maps.event.addListener(this.mark, 'click', function(){
        this.info.open(map, this.mark);
    });
}

Когда я тестирую этот код, маркеры помещаются нормально, но когда я нажимаю на них, вместо отображения InfoWindow, я получаю эту ошибку в консоли JS:

Uncaught TypeError: Cannot call method 'open' of undefined

Конечно, это проблема масштаба, но я не могу понять, почему это должно быть.Примерно так работает отлично:

function test(a){
    this.a = a
    this.b = function(){
        this.a+=1
    }
}

Большое спасибо за помощь!

Answer 1

Похоже, вы теряете сферу здесь:

google.maps.event.addListener(this.mark, 'click', function(){
  this.info.open(map, this.mark);
});

Попробуйте сохранить значение this примерно так:

var _self = this;    
google.maps.event.addListener(_self.mark, 'click', function(){
  _self.info.open(map, _self.mark);
});

Answer 2

Одним из способов достижения того, чего вы хотите, может быть передача this.info в качестве аргумента функции, которую вы связываете с событием click, и затем использование «open» в передаваемом параметре. Это должно решить проблему.

Причина, по которой эта функция не может идентифицировать this.info, заключается в том, что функция здесь не определяется как внутренняя функция.