如何將標記添加到Google地圖？

Question

我正在嘗試在提交時爲我的Google地圖添加一個標記。現在，當我提交該字段時，它正在創建對象，但標記未顯示。現在我能夠獲得一個位置，以顯示它是否被硬編碼，但不是當我添加一個新位置時。 （我知道，鑑於目前僅適用於硬編碼的一個，我有那麼當前的代碼工作）

這裏是我的代碼：

筆者認爲：

<form> 
    <input type="number" class="" ng-model="marker.markerLat" required=""> 
    <input type="number" class="" ng-model="marker.markerLng" required=""> 
    <button class="button" ng-click="addMarker(marker)">Add</button> 
</form> 
<google-map center="map.center" zoom="map.zoom"> 
<marker coords="marker.coords" options="marker.options" idkey="marker.id" > 
</marker> 
</google-map> 

我控制器：

//Default location 
     $scope.map = { 
      center: { 
      latitude: 32.7833, 
      longitude: -79.9333 
      }, 
      zoom: 11 
     } 
     $scope.options = {scrollwheel: true}; 

     $scope.markers = []; 

     $scope.addMarker = function (marker) { 

      $scope.markers.push({ 
       latitude: parseFloat($scope.markerLat), 
       longitude: parseFloat($scope.markerLng) 
      }); 

      console.log('Maker add: ' + $scope.markers); 
      $scope.markerLat =""; 
      $scope.markerLng =""; 
     }; 

     $scope.marker = { 
      id:0, 
      coords: { 
      latitude: 32.7833, 
      longitude: -79.9333 
      } 
      } 

Answer 1

我會建議你爲你的地圖創建一個自定義的角度指令。

但無論如何，角度不足以得到你想要的工作。您必須創建google.maps對象。並將您的的map property設置爲您創建的map。

這裏是一個小例子：

.directive('map', function() { 
return { 
    template: '<div></div>', 
    restrict: 'EA', 
    replace: true, 
    link: function (scope, element) { 

    scope.markers = []; 

    scope.map = new google.maps.Map(element[0], { 
     center: new google.maps.LatLng(32.7833, -79.9333), 
     zoom: 11 
    }); 

    scope.addMarker = function (lat, lnt) { 
     var marker = new google.maps.Marker({ 
     map: scope.map, 
     position: new google.maps.LatLng(lat, lng) 
     }); 

     scope.markers.push(marker); 
    }; 

    } 
}); 

所以，你只需要調用addMarker功能與lat和lng參數。使用角度事件在控制器和指令之間進行通信。有關方法的更多信息here