Question

我在我的应用中使用谷歌地图将某些用户的位置显示为标记。在一个infowindow我然后在我的平台上显示一个简短的生物，他们的用户名和他们的个人资料的链接。但是，目前，每个信息窗口的内容显示相同。有人可以帮忙吗？我对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

问题是您只创建了一个https://contoso-my.sharepoint.com/personal/jdoe_contoso_onmicrosoft_com/_api/web/getfilebyserverrelativeurl('/personal/jdoe_contoso_onmicrosoft_com/Documents/Shared%20with%20Everyone/UserGuide.docx')?$expand=ListItemAllFields实例，该代码在代码中位于InfoWindow变量行的正下方。基本上，只有一个InfoWindow存在，因此只能存储一组内容。您正在不同坐标处重复使用map的相同实例，因此它们都具有相同的内容。

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

for

为离子

1 个答案: