Question

我希望在加载后自动将地图置于用户的位置，因此我在加载地理位置时使用了$scope.$apply()，如TestCtrl中的controller.js所示：

$scope.drawMap = function(position) {                                
        $scope.$apply(function() {
        $scope.myLocation.lng = position.coords.longitude;
        $scope.myLocation.lat = position.coords.latitude;

        $scope.map = {
            center: {
                latitude: $scope.myLocation.lat,
                longitude: $scope.myLocation.lng
            },
            zoom: 14,
            events: {
                click: $scope.clickCallback
            }
        };                          
    });
};

navigator.geolocation.getCurrentPosition($scope.drawMap);

$scope.test = function(){
    alert("hola");
};

$scope.clickCallback用于在点击事件中将新标记推送到地图。

// inside TestCtrl
var markers = [], counter = 1;
$scope.clickCallback = function(map, eventName, event){                        
    var lat = event[0].latLng.lat();
    var lng = event[0].latLng.lng();

    markers.push(createNewMarker(counter, lat, lng));        

    $scope.$apply(function(){
        $scope.newMarker = markers;           
    });       
    counter++;            
};

如您所见，还有另一个$scope.$apply可以应用新标记。

createNewMarker()是定义标记（ui-gmap-markers）模型的地方。

// still inside TestCtrl
var createNewMarker = function(i, lat, lng, idKey) {

    if (idKey == null) {
        idKey = "id";
    }
    var foo = "<h4>New Marker</h4><form><input type='text' placeholder='Event name' name='name'></input> <input type='button' value='submit'></input><input type='button' ng-click='test()' value='Delete marker'></input></form>";
    var bar = $compile(foo)($scope);
    var ret = {
        latitude: lat,
        longitude: lng,            
        show: true,
        options: {
            draggable: true,
            animation: google.maps.Animation.DROP,
        },            
        windows: {
            title: "New Marker",
        },
        windowsOptions: {     
           content: foo,
        }
    };
    ret[idKey] = i;
    return ret;
};

现在，当我点击包含窗口的地图时，标记显示正常，但是当我点击Delete marker按钮时，我的$scope.test()功能未启动。我尝试使用$compile，但它返回了一堆关于$scope的错误。

这是我的模板：

<ion-content scroll="false">
  <ui-gmap-google-map center='map.center' zoom='map.zoom' bounds="map.bounds" events="map.events">
    <ui-gmap-markers models="newMarker" coords="'self'" icon="'icon'" options="'options'">
      <ui-gmap-windows show="show" options="'windowsOptions'">
      </ui-gmap-windows>
    </ui-gmap-markers>
  </ui-gmap-google-map>
</ion-content>

有谁熟悉这种情况？我正在使用Ionic Framework btw。

Answer 1

它不一定非常复杂。

作为ngMap的创建者，我建议这样做，

http://ngmap.github.io/drawings.html#/marker-remove#marker-remove

要设置当前位置，只需使用current-location

即可

<map center="current-location" zoom="12" on-click="addMarker()">
  <marker ng-repeat="pos in positions" position="{{pos.lat}}, {{pos.lng}}"></marker>
</map>

http://plnkr.co/edit/e1SioHQ6NTSYCp0EbR0x?p=preview

AngularJS ng-click不使用angular-google-maps'窗口进行射击

1 个答案: