loop infowindow с маркером с использованием 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

Если я правильно вас понял, вы хотели бы, чтобы отобразить информационное окно с информацией о том, что correspo nds к щелкнутому маркеру. Если да, то в следующем примере показано, как выполнить его:

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

Thx для ответа ... Я уже исправить это тоже .. Так мое решение ..

<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."); 
    }