So verschieben Sie eine Markierung auf einer Google-Karte

Ich lerne die Google Maps-API und versuche, ein Objekt auf der Karte zu verschieben. Ich habe eine Testseite erstellt, die beim Start eine Markierung anzeigt, aber nach dem Aufruf einer Funktion, die die Länge vergrößert, entfernt sie die Markierung aus der Karte. In der Konsole ist kein Fehler aufgetreten. Kann jemand meinen Code ansehen und mir helfen herauszufinden, warum das passiert? Javascript-Datei:So verschieben Sie eine Markierung auf einer Google-Karte

var app = angular.module('angularGoogleMapsTestApp', ['uiGmapgoogle-maps']); 

var increment = 2.02; 
var startingLongitude = -122.44; 
var startingLatitude = 37.769; 

    app.controller('angularGoogleMapCtrl', function ($scope, $log, $rootScope) { 

$scope.map = {center: {latitude: 37.7699298, longitude: -122.4469157}, zoom: 12}; 
$scope.markers = []; 

$scope.removeMarkers = function() { 
    $scope.markers = []; 
} 

function init() { 
    $scope.markers.push(
      { 
       id: 0, 
       latitude: startingLatitude, 
       longitude: startingLongitude 
      }); 

    $log.info(JSON.stringify($scope.markers)); 
} 

$scope.moveMarker = function() { 
    var old = $scope.markers[0].longitude; 
    $scope.markers.splice(0, 1); 
    $scope.markers.push(
      { 
       id: 0, 
       latitude: startingLatitude, 
       longitude: (old + increment) 
      }); 
    $log.info(JSON.stringify($scope.markers)); 
}; 

    init(); 

});

und html:

<!DOCTYPE html> 
<head> 
<meta charset="utf-8"> 
<title>ngMap Tests</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script src="bower_components/angularjs/angular.js"></script> 
<script src="bower_components/lodash/dist/lodash.js"></script> 
<script src='bower_components/angular-google-maps/dist/angular- google-maps.js'></script> 
<script src="angularGoogleMapsTestApp.js"></script> 
<style> 
    .angular-google-map-container { height: 400px; } 

</style> 
</head> 
<body ng-app="angularGoogleMapsTestApp"> 
<h3>Angular Google Maps Test</h3> 

<p>Test showing adding and removing markers on Angular Google Maps 
    (from: <a href="http://angular-ui.github.io/angular-google-maps/#!/"> 
     Angular Google Maps</a>)</p> 

<div ng-controller="angularGoogleMapCtrl"> 
    <input ng-click="moveMarker()" type="button" value="moveMarker"> 
    <input ng-click="removeMarkers()" type="button" value="Remove markers"> 

    <div style="height:500px"> 
     <ui-gmap-google-map center='map.center' zoom='map.zoom'> 
      <ui-gmap-markers models="markers" coords="'self'" modelsbyref="false"/> 
     </ui-gmap-google-map> 
    </div> 
    </div> 
    </body> 
    </html>

Quelle

2016-07-21 Anonymous

Wenn Sie Angular Google Maps v1.2.0 oder höher verwenden, Markierer Objekte erfordern eine idKey, described here in the docs. Sie können Ihren aktuellen id Schlüssel mit idKey wie so ändern:

$scope.markers.push({ 
    idKey: 0, 
    latitude: startingLatitude, 
    longitude: startingLongitude 
});

Quelle

2016-07-21 17:27:18

es nicht mit idKey funktioniert –

So verschieben Sie eine Markierung auf einer Google-Karte

Antwort

Verwandte Themen