AngularJS + Google Maps zeigt keinen Marker an

Question

Ich habe einen Marker, der auf $ scope.mapCreated funktioniert. Jetzt versuche ich eine andere Markierung zu zeigen, wenn der Benutzer auf $ scope.centerOnMe() klickt, aber nur der aktuelle Ort ohne Markierung angezeigt wird.

Muss ich this example verwenden oder gibt es eine einfachste Lösung?

Controller

.controller('mapCtrl', ['$scope', '$state', '$ionicLoading', function($scope, $state, $ionicLoading){ 

$scope.mapCreated = function(map) { 

    var latlngPlace = new google.maps.LatLng(-27.4264356, -51.7838787); 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: latlngPlace 
    }); 

    $scope.map = map; 
}; 

$scope.centerOnMe = function() { 
console.log("Centering"); 
if (!$scope.map) { 
    return; 
} 

$scope.loading = $ionicLoading.show({ 
    content: 'Wait...', 
    showBackdrop: false 
}); 

navigator.geolocation.getCurrentPosition(function (pos) { 
    console.log('Got pos', pos); 

    $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); 

    var myPlace = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); 

    var marker2 = new google.maps.Marker({ 
     position: myPlace 
    }); 


    $ionicLoading.hide(); 

}, function (error) { 

    console.log('Error' + error.message) 
}); 
};  

}]) 

directives.js

angular.module('app.directives', []) 

.directive('map', function(){ 

return { 
restrict: 'E', 
scope: { 
    onCreate: '&' 
}, 
link: function ($scope, $element, $attr) { 
    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(-27.426102, -51.784999), 
     zoom: 16, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map($element[0], mapOptions); 

    $scope.onCreate({map: map}); 

    // Stop the side bar from dragging when mousedown/tapdown on the map 
    google.maps.event.addDomListener($element[0], 'mousedown', function (e) { 
     e.preventDefault(); 
     return false; 
    }); 
    } 

    if (document.readyState === "complete") { 
    initialize(); 
    } else { 
    google.maps.event.addDomListener(window, 'load', initialize); 
    } 
} 
} 

}); 

map.html

<ion-view title="Map" id="page9" style="background-color:#FFFFFF;"> 
<ion-content> 
    <map on-create="mapCreated(map)"></map> 
</ion-content> 
<ion-footer-bar class="bar-stable bar-calm"> 
    <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">FindMe</a> 
</ion-footer-bar> 
</ion-view> 

Answer 1

Es fehlte nur die Karte: $ scope.map

var myPlace = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); 

var marker2 = new google.maps.Marker({ 
    map: $scope.map, 
    position: myPlace 
}); 

Answer 2

Sie können einen neuen Marker innerhalb centerOnMe() Funktion erstellen. Unten ist das Beispiel, das einen neuen Marker erstellt. Das ist die einzige Möglichkeit, einen Marker zu erstellen.

$scope.centerOnMe = function() { 
    console.log("Centering"); 
    // Adding a new marker 
    var marker1 = new google.maps.Marker({ 
    map: $scope.map, 
    position: new google.maps.LatLng(lat, lng); 
    }); 

    if (!$scope.map) { 
    return; 
    } 
}