Angularjs erhalten getNorthEast und getSouthWest

Question

Sie können meinen Code von der Geige Seite unten sehen. Es gibt kein Problem mit der Karte und den Markierungen, aber ich brauche die Koordinaten Südwest und Nordost.

code fiddle link is here

Ich versuche dies, aber es funktioniert nicht.

var bounds = map.getBounds(); 
 
var ne = bounds.getNorthEast(); // LatLng of the north-east corner 
 
var sw = bounds.getSouthWest(); // LatLng of the south-west corder 
 
var nw = new google.maps.LatLng(ne.lat(), sw.lng()); 
 
var se = new google.maps.LatLng(sw.lat(), ne.lng());

angular.module('hotelApp', []) 
 
    .controller('ContentControler', function ($scope, $timeout) { 
 

 
    var mapOptions = { 
 
     zoom: 4, 
 
     center: new google.maps.LatLng(40.0000, -98.0000), 
 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    } 
 
    $scope.location_name = ""; 
 
    $scope.names = [{ 
 
     prop_Name: 'Location 1', 
 
     prop_Addr: '123 Easy Street', 
 
     prop_Price: 325.00, 
 
     prop_Dist: .25, 
 
     prop_Desc: 'This is the First Location.', 
 
     lat: 43.7000, 
 
     long: -79.4000 
 
    }, { 
 
     prop_Name: 'Location 2', 
 
     prop_Addr: '456 Easy Street', 
 
     prop_Price: 114.00, 
 
     prop_Dist: 3, 
 
     prop_Desc: 'This is the Second Location.', 
 
     lat: 40.6700, 
 
     long: -73.9400 
 
    }, { 
 
     prop_Name: 'Location 3', 
 
     prop_Addr: '789 Easy Street', 
 
     prop_Price: 98.00, 
 
     prop_Dist: 4, 
 
     prop_Desc: 'This is the Third Location.', 
 
     lat: 41.8819, 
 
     long: -87.6278 
 
    }, { 
 
     prop_Name: 'Location 4', 
 
     prop_Addr: '1011 Easy Street', 
 
     prop_Price: 150.00, 
 
     prop_Dist: 1, 
 
     prop_Desc: 'This is the Fourth Location.', 
 
     lat: 34.0500, 
 
     long: -118.2500 
 
    }, { 
 
     prop_Name: 'Location 5', 
 
     prop_Addr: '1213 Easy Street', 
 
     prop_Price: 250.00, 
 
     prop_Dist: 7, 
 
     prop_Desc: 'This is the Firth Location.', 
 
     lat: 36.0800, 
 
     long: -115.1522 
 
    }]; 
 
    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 

 
    $scope.markers = []; 
 

 
    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.long), 
 
      title: info.prop_Name 
 
     }); 
 
     marker.content = '<div class="infoWindowContent"><ul>' + '<li>' + info.prop_Desc + '</li>' + '<li>' + info.prop_Addr + '</li>' + '<li>' + info.prop_Price + '</li>' + '<li>' + info.prop_Dist + '</li>' + '</ul></div>'; 
 

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

 
     $scope.markers.push(marker); 
 

 
    } 
 

 
    for (i = 0; i < $scope.names.length; i++) { 
 
     createMarker($scope.names[i]); 
 
    } 
 

 
    $scope.openInfoWindow = function (e, selectedMarker) { 
 
     e.preventDefault(); 
 
     google.maps.event.trigger(selectedMarker, 'click'); 
 
    } 
 
    //Max Location Price 
 
    $scope.maxPrice = 500; 
 
    $scope.priceRangeFilter = function (location) { 
 
     return location.prop_Price <= $scope.maxPrice; 
 
    }; 
 
    //Max POI Radius 
 
    $scope.maxRadius = 15; 
 
    $scope.radiusRangeFilter = function (location) { 
 
     return location.prop_Dist <= $scope.maxRadius; 
 
    }; 
 

 
    $scope.$watch('nas', 
 

 
    function (newValue, oldValue) { 
 
     for (jdx in $scope.markers) { 
 
      $scope.markers[jdx].setMap(null); 
 
     } 
 
     $scope.markers = []; 
 
     for (idx in $scope.nas) { 
 
      createMarker($scope.nas[idx]); 
 
     } 
 
    }, true); 
 

 
});

#map { 
 
    height:420px; 
 
    width:600px; 
 
} 
 
.infoWindowContent { 
 
    font-size: 14px !important; 
 
    border-top: 1px solid #ccc; 
 
    padding-top: 10px; 
 
} 
 
h2 { 
 
    margin-bottom:0; 
 
    margin-top: 0; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="hotelApp" ng-controller="ContentControler"> 
 
    
 
<h2>Filters</h2> 
 

 
    <p>Location Name: 
 
     <input type="text" ng-model="location_name"> 
 
    </p> 
 
    <p>Maxium Price: 
 
     <input type="text" ng-model="maxPrice"> 
 
    </p> 
 
    <p>POI Search Radius: 
 
     <input type="text" ng-model="maxRadius"> 
 
    </p> 
 
    <div id="map"></div> 
 
    <div id="class" ng-repeat="marker in markers"></div> 
 
    <ul> 
 
     <li ng-repeat="x in nas = (names | filter:{prop_Name:location_name} | filter:priceRangeFilter | filter:radiusRangeFilter)">{{ x.prop_Desc + ', ' + x.prop_Addr + ', ' + '$' + x.prop_Price }}</li> 
 
    </ul> 
 
</div>

Answer 1

Um Grenzen Sie zu erhalten müssen Sie den Code in einem Ereignis-Listener als 'Leerlauf' setzen oder 'bounds_changed'

google.maps.event.addListenerOnce($scope.map, 'idle', function(){ 
    var bounds = $scope.map.getBounds(); 
    var ne = bounds.getNorthEast(); // LatLng of the north-east corner 
    var sw = bounds.getSouthWest(); // LatLng of the south-west corder 
    var nw = new google.maps.LatLng(ne.lat(), sw.lng()); 
    var se = new google.maps.LatLng(sw.lat(), ne.lng()); 
}); 

Answer 2

Ich löste t er Problem :)

google.maps.event.addListener($scope.map, 'idle', function(event){ 
 
\t \t \t var lat0 = $scope.map.getBounds().getNorthEast().lat(); 
 
\t \t \t var lng0 = $scope.map.getBounds().getNorthEast().lng(); 
 
\t \t \t var lat1 = $scope.map.getBounds().getSouthWest().lat(); 
 
\t \t \t var lng1 = $scope.map.getBounds().getSouthWest().lng(); 
 
\t \t \t }); 
 
\t \t \t

dies gut funktioniert, aber wie in Marker funtion zeigen LAT0

var createMarker = function (info) { 
 
\t 
 
     var marker = new google.maps.Marker({ 
 
      map: $scope.map, 
 
      position: new google.maps.LatLng(info.lat, info.lng), 
 
      title: info.prop_Name, 
 
\t \t \t animation: google.maps.Animation.DROP, 
 
\t \t \t ?? here ?? 
 
     }); 
 
    }