在angularjs

Question

我有一个城市选择框，其中有多个城市通过ng-options。我需要根据选择框中选择的城市在网站上显示地图 这就是我得到城市名字的方式

// Code goes here


$scope.data = [{
        cities: [{
            id: 1,
            title: 'Mysore'
        }, {
            id: 2,
            title: 'Bangalore'
        }, {
            id: 3,
            title: 'Delhi'
        }, {
            id: 4,
            title: 'Mumbai'
        }],
        maps: [{
                id: 1,
                title: 'Zoo',
                city_id: 1
            }, {
                id: 2,
                title: 'Palace',
                city_id: 1
            }, {
                id: 3,
                title: 'Beach',
                city_id: 4
            }]

    }];
});

Plunker https://plnkr.co/edit/r1S1e61H3RfH3uYGYTBP?p=preview
任何人都可以帮助我。

Answer 1

将坐标移动到$scope：

$scope.coordinates = {
  lat: 28.620089858889145,
  lng: 77.17483520507812
};

和

<ng-map zoom="13" center="{{coordinates.lat}},{{coordinates.lng}}" ...

在选择中使用ng-change：

ng-change="centerCity(citySelect.selectedOption)"

在centerCity方法中，您可以使用地理编码器按城市名称检索坐标。然后你只需要更新变量。

简单示例：

var geocoder = new google.maps.Geocoder();

$scope.centerCity = function(city) {

  geocoder.geocode({
    'address': city.title
  }, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

      $scope.$apply(function() {
        $scope.coordinates.lat = results[0].geometry.location.lat();
        $scope.coordinates.lng= results[0].geometry.location.lng();
      });

    } else {
      console.log('Error');
    }
  });
};

演示： https://plnkr.co/edit/WETs0FL0DbPbDn2A77hq?p=preview