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的{{1}}设置为您创建的marker。

这是一个小例子：

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函数即可。使用角度事件在控制器和指令之间进行通信。有关方法here

的更多信息

如何在Google地图中添加标记？

1 个答案: