我有一些标记,每个标记都有它的信息。窗口,如何在javascript

时间:2017-07-25 13:04:33

标签: javascript json maps foursquare

我有一些标记,每个标记都有它的信息。窗口,如何在一个信息窗口中自定义它们,每次在单击另一个时重新分配数据?在javascript

self.getContent = '<div class="window-content" style="background-color:#a0785c;padding:5px;color:#fff;text-transform:uppercase; border-radius:5px;"><div class="title"><h4 style="color:#38c3ea;">' + self.title + "</h4></div>" + '<div class="extrContent"> ( ' + self.lat + ' , ' + self.lng + " ) </div>" + '<div class="extrContent"> city ->' + " " + self.city + "</div>" + '<div class="extrContent"> Street ->' + " " + self.street + "</div>" + '<div class="extrContent">' + self.checkinsCount + " checkins </div></div>";
    });
    self.getContent = '<div class="window-content" style="background-color:#a0785c;padding:5px;color:#fff;text-transform:uppercase; border-radius:5px;"><div class="title"><h4>' + self.title + "</h4></div>" + '<div class="extrContent">' + self.city + "</div>" + '<div class="extrContent">' + self.street + "</div>" + '<div class="extrContent">' + self.checkinsCount + "</div></div>";
    // define infoWindow 
    self.infoWindow = new google.maps.InfoWindow({
        content: self.getContent
    });
    // add and show markers
    self.marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.location.lat, data.location.lng),
        map: map,
        title: data.title,
        animation: google.maps.Animation.DROP,
    });
    // function to show markers on map
    this.isVisible = ko.observable(false);
    this.isVisible.subscribe(function(currentState) {
        if (currentState) {
            self.marker.setMap(map);
        } else {
            self.marker.setMap(null);
        }
    });
    this.isVisible(true);
    // Get contect infowindows
    self.marker.addListener('click', function() {
        // declare info window
        self.infoWindow = new google.maps.InfoWindow({
            content: self.getContent
        });
        self.infoWindow.setContent(self.getContent);
        self.infoWindow.open(map, this);
        // set marker animation 
        self.marker.setAnimation(google.maps.Animation.DROP);
    });
};

0 个答案:

没有答案