如何将标记添加到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