使用 ng-map 使用标记循环信息窗口

Question

所以如果我用信息窗口循环我的标记，信息窗口会显示关于所有标记的所有信息，而不是单独显示。我也尝试在信息窗口中使用过滤器和过滤循环，但没有工作.. 对不起，我的英语不是母语..

info-window and marker image how look like my problem

my code here

 <div class="googleMaps">
    <ng-map id="map" style="height: 224px" zoom="14" center="currentLocation()" ng-init="currentLocation()">
        <marker animation="DROP"
                position="currentLocation()"
                icon="../img/tagGoogle.png" >
        </marker>
        <marker animation="DROP" 
                ng-repeat="results in xResult" 

                value="{{results.name}}" 
                position="{{results.lat +','+ results.lng}}"
                on-click="showInfoWindow(1)">
        </marker> 
        <info-window id="1">
      <div ng-non-bindable="">
        <div ng-repeat="results in xResult">
          <div>
            shop id:{{ results.id }} name:{{results.name}}<br>
          </div>
        </div>
      </div> 
    </info-window> 
    </ng-map>
</div>

Answer 1

如果我理解正确，您希望显示信息窗口，其中包含与单击的标记相对应的信息。如果是这样，下面的例子演示了如何完成它：

angular.module('mapApp', ['ngMap'])
    .controller('mapController', function($scope, NgMap) {

        NgMap.getMap().then(function(map) {
            $scope.map = map;
        });
        $scope.cities = [
            { id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
            { id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
            { id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
            { id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
            { id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
        ];
        $scope.showCity = function(event, city) {
            $scope.selectedCity = city;
            $scope.map.showInfoWindow('myInfoWindow', this);
        };

    });

<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="app.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
    <ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
        <info-window id="myInfoWindow">
            <div ng-non-bindable>
                <h4>{{selectedCity.name}}</h4>
            </div>
        </info-window>
        <marker ng-repeat="c in cities"
                position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="showCity(event, c)">
        </marker>
    </ng-map>
</div>

Answer 2

谢谢回答...我也已经解决了.. 所以我的解决方案..

<div class="googleMaps">
<div id="map" ng-init="currentLocation()"></div>
</div>

<form id="coffeForm" ng-submit="submitForm()">
    <div class="textField" ng-repeat="marker in markers | orderBy : 'title'" ng-class="{ 'selected-class-name': $index == selectedIndex }"
         ng-click="itemClicked($index)">


        <div flex id="class" class="text-center">
            <label flex href="#" class="text-center" ng-click="openInfoWindow($event, marker)">{{marker.title}}
           <input flex id="Id" type="radio" name="Id" ng-model="form.Id" value="{{marker.id}}" /></label>


        </div>
    </div>
    <a class="coffGoBtn text-center" href="#/orderCoffe" ng-click="submitForm()">Pokracuj</a>
</form>

$scope.currentLocation = function() {
    var options = {
        enableHighAccuracy: true
    };
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (pos) {
                $scope.position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
                $scope.Lat = pos.coords.latitude;
                $scope.Long = pos.coords.longitude;
                var postData = $.param({
                    arr1: JSON.stringify({
                        latit: $scope.Lat
                    }),
                    arr2: JSON.stringify({
                        longit: $scope.Long
                    })
                });
                console.log(postData);
                $http({
                    method: 'POST',
                    url: 'range.php',
                    data: postData,
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                    dataType: JSON
                }).success(function (res) {

                    $scope.xResult = [];
                    $scope.xResult = res;
                    var setPosition = $scope.position;
                    var mapOptions = {
                        zoom: 15,
                        center: $scope.position,
                        disableDefaultUI:true,
                        //scrollwheel: false,
                        //navigationControl: false,
                        //mapTypeControl: false,
                        //scaleControl: false,
                        draggable: false,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        icon: ourMarker
                    };
                    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
                    var ourMarker = new google.maps.Marker({
                        position: setPosition,
                        map: $scope.map,
                        title: 'its me',
                        icon: 'img/tagGoogle.png'
                    });
                    ourMarker.setMap($scope.map);
                    $scope.markers = [];
                    $scope.logos= [];
                    $scope.names =[];

                    var infoWindow = new google.maps.InfoWindow();


                    var createMarker = function(info){

                        var marker = new google.maps.Marker({
                            map: $scope.map,
                            position: new google.maps.LatLng(info.lat, info.lng),
                            title: info.name,
                            logo: info.img,
                            id: info.id,
                            icon: "img/Place.png"
                        });


                        marker.content = '<div class="infoWindowContent">' + info.name + ", " +"<br>"+ "vzdialenost: " + info.distance * 1000 + "m" +'</div>';

                        google.maps.event.addListener(marker, 'click', function(){
                            infoWindow.setContent('<h6>' + marker.title + '</h6>' + marker.content);
                            infoWindow.open($scope.map, marker);
                            $log.info(infoWindow);

                        });


                        $scope.markers.push(marker);

                    };
                    for (var i = 0; i < res.length; i++){

                        createMarker(res[i]);
                    }

                    $scope.openInfoWindow = function(e, selectedMarker){
                        google.maps.event.trigger(selectedMarker, 'click');
                    };

                }).error(function (error) {
                    console.log(error);
                });


            },
            function (error) {
                alert('Unable to get location: ' + error.message);
            }, options);
    }
    else {
        alert("Please reload page or click on the Set Position button or your browser does not support geolocation services.");
    }