Нарисуйте карту, основанную на выбранном городе в selectbox в angularjs

Question

У меня есть поле выбора для города, в котором есть число городов, проходящих через ng-опции. Мне нужно показать карту на веб-сайте на основе города, выбранного в поле выбора.
это, как я получаю город имена

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