如何使用按鈕點擊更改Google地圖類型？

Question

我爲谷歌地圖指令，允許通過在地圖類型和地址值：

.directive('map', function(){ 
return { 
    restrict: 'E', 
    replace: true, 
    template: '<div></div>', 
    scope: { 
     'address': "@", 
     'mapType': "@" 
    }, 
    link: function(scope, element, attrs) { 
     console.log(scope, attrs); 
     var geoCoder = new google.maps.Geocoder(); 
     geoCoder.geocode(
      {'address': scope.address}, 
      function(result, status){ 
       console.log(result, status); 
       if(status==="OK"){ 
        map.setCenter(result[0].geometry.location); 
        marker.setPosition(result[0].geometry.location); 
       } 
      } 
     ); 
     var mapOptions = { 
      zoom: 16, 
      mapTypeId: eval(scope.mapType), 
      draggable: false 
     }; 
     if(scope.mapType === undefined || scope.mapType === ""){ 
      mapOptions.mapTypeId = google.maps.MapTypeId.ROADMAP; 
     } 
     var map = new google.maps.Map(document.getElementById(attrs.id), mapOptions); 
     var marker = new google.maps.Marker({ 
      map: map, 
     }) 
    } 
    }; 
}) 

我也做了一個控制器來控制我會在傳遞什麼地圖類型：

$scope.mapModules = [ 
    { 
     text: "街道地圖", 
     value: "google.maps.MapTypeId.ROADMAP" 
    }, 
    { 
     text: "鳥瞰地圖", 
     value: "google.maps.MapTypeId.SATELLITE" 
    } 
]; 

$scope.selected = $scope.mapModules[0]; 
$scope.mapType = $scope.mapModules[0].value; 

$scope.select = function(item){ 
    console.log(item); 
    $scope.selected = item; 
    $scope.mapType = item.value; 
}; 

這是視圖層在地圖上看到：

<div class="row noPadding"> 
    <div ng-click="select(option)" class="col textCenter mapOption" ng-class="{'mapOptionActived': option == selected}" ng-repeat="option in mapModules"> 
      {{option.text}} 
    </div> 
</div> 
<map map-type="{{mapType}}" id="schoolMap" style="height: 200px; width:100%" address="2140 w 41st Vancouver, BC"></map> 

一切正常，與第一次加載頁面，但是當我點擊地圖模塊按鈕，地圖類型不會更改。所以我正在尋找解決方案，讓用戶點擊選項按鈕時可以更改地圖類型。

謝謝。

Answer 1

你可以這樣來做：

var mapType = "ROADMAP"; 
map.setMapTypeId(google.maps.MapTypeId[mapType]);