Question

您可以从下面的小提琴页面看到我的代码。地图和标记没有问题，但我需要西南和东北坐标。

我试试这个，但它不起作用。

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

为了获得界限，你需要将你的代码放在一个事件监听器中，因为空闲＆＃39;或＆＃39; bounds_changed＆＃39;

function checkarrayvalues($term, $arr, $strict = false, $partial = false) {
    if ($partial) {  // whether it should perform a partial match
        $fn = ($strict) ? "strpos" : "stripos";
    }
    foreach ($arr as $item) {
        if (is_array($item)) {
            if (checkarrayvalues($term, $item, $strict, $partial))
                return true;
        } elseif (($partial && call_user_func($fn, $item, $term) !== false) 
                || ($strict ? $item === $term : $item == $term)) {
            return true;
        }
    }
    return false;
}

$arr = [
    ['Dallas', 'New York']
];

var_dump(checkarrayvalues('dall', $arr, true, true));  // false
var_dump(checkarrayvalues('dall', $arr, false, true)); // true
var_dump(checkarrayvalues('york', $arr, false, true)); // true
var_dump(checkarrayvalues('york', $arr, false));       // false

Answer 2

我解决了问题：）

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

这很好但是如何在标记功能中显示lat0

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

Angularjs获得getNorthEast和getSouthWest

2 个答案: