根据 angularjs 中选择框中所选城市绘制地图

Question

我有一个 select 城市框，其中包含通过 ng-options 的城市数量。我需要在 select 框中显示基于城市 select 的网站上的地图。
这就是我获取城市名称的方式

// 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
            }]

    }];
});

这里是傻瓜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}}" ...

在 select 上使用 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

根据 angularjs 中选择框中所选城市绘制地图

Draw map based on selected city in selectbox in angularjs

angularjs

google-maps

drop-down-menu

ng-options

city