javascript - 为 ionic 标记创建多个信息窗口

Question

我在应用程序中使用谷歌地图将某些用户的位置显示为标记。然后，我在信息窗口中显示简短的个人简介、他们的用户名以及他们在我的平台上的个人资料的链接。然而，目前每个信息窗口中的内容显示是相同的。有人可以帮忙吗？我对 Angular-js 和 ionic 很陌生，我知道我的代码非常草率。目前，虽然我只需要它工作，但优雅和性能/效率稍后会出现。

.controller('MapviewCtrl', function($scope, $cordovaGeolocation, $ionicLoading, $ionicPlatform, $compile) {
    $ionicPlatform.ready(function () {
        $ionicLoading.show({
            template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
        });


        var posOptions = {
            enableHighAccuracy: true,
            timeout: 20000,
            maximumAge: 0
        };

        $cordovaGeolocation.getCurrentPosition(posOptions).then(function (position) {
            var lat = position.coords.latitude;
            var long = position.coords.longitude;
            console.log("Current Latitude and Longitude",lat,long)
            var myLatlng = new google.maps.LatLng(lat, long);

            var mapOptions = {
                center: myLatlng,
                zoom: 14,
                maxZoom:14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("map"), mapOptions);

            //
            function downloadUrl(url,callback) {
                var request = window.ActiveXObject ?
                    new ActiveXObject('Microsoft.XMLHTTP') :
                    new XMLHttpRequest;

                request.onreadystatechange = function() {
                    if (request.readyState === 4) {
                        //request.onreadystatechange = doNothing;
                        callback(request, request.status);
                    }
                };
                request.open('GET', url, true);
                request.send(null);
            }

            $scope.markers = [];

            var url = "xmlprovider"
            downloadUrl(url,function(data){
                var xml=data.responseXML;
                console.log("XML From Server: ", xml);
                var markers = xml.getElementsByTagName("marker");
                var userSports = window.localStorage.getItem("listOfUserActivities");

                for (var i=0; i<markers.length; i++){
                    var point = new google.maps.LatLng(
                        parseFloat(markers[i].getAttribute("lat")),
                        parseFloat(markers[i].getAttribute("lon")));
                    var sportsArr = markers[i].getAttribute("sports");
                    $scope.chatToUserID = markers[i].getAttribute("userID");
                    for (var s=0; s<sportsArr.length; s++) {
                        if (userSports.indexOf(sportsArr[s]) > -1) {
                            $scope.user = markers[i].getAttribute("user");
                            var html = '<div><h3 style="color:#387EF5">'+markers[i].getAttribute("user")+'</h3><h4 style="color:#387EF5">'+markers[i].getAttribute("bio")+'</h4><br><a data="'+$scope.user+'" href="/#/app/userProfile/'+$scope.user+'/'+$scope.chatToUserID+'/'+markers[i].getAttribute("bio")+'">View Profile</a></div>'
                            var html = $compile(html)($scope);

                            var marker = new google.maps.Marker({
                                map: $scope.map,
                                position:  point,
                            });

                            $scope.markers.push(marker);
                            bindInfoWindow(marker, map, html);
                        }
                    }
                }
            });

            function bindInfoWindow(marker, map, html) {
                var infoWindow = new google.maps.InfoWindow({});
                google.maps.event.addListener(marker, 'click', function() {
                    infoWindow.content=html[0].innerHTML;
                    infoWindow.open(map, marker);
                    console.log(html)
                    window.localStorage.setItem("html",html);
                });
            }

            $scope.map = map;
            $ionicLoading.hide();

        }, function (err) {
            $ionicLoading.hide();
            console.log(err)
        });
    })
    $scope.chatToUser = function(user){
        console.log(user)
        var url = "app.profile/"+$scope.chatToUser
        $state.go(url)
    }
})

Answer 1

问题是您只创建了一个 InfoWindow 实例，在代码中，该实例位于 map 变量行的正下方。本质上，只有一个InfoWindow存在，因此只能存储一组内容。您在不同的坐标处重复使用 infowindow 的相同实例，因此它们都具有相同的内容。

只需在 for 循环调用的函数内部创建一个新的 InfoWindow 即可解决此问题。

    function bindInfoWindow(marker, map, infoWindow) {
        var infowindow = new google.maps.InfoWindow({});
        google.maps.event.addListener(marker, 'click', function() {
            infoWindow.content=marker.html[0];
            infoWindow.open(map, marker);
            console.log(html)
            window.localStorage.setItem("html",html);
        });
    }