Angularjs谷歌地图标记和哑剧不工作

Question

我有这个控制器设置或通过插入地址获取有关谷歌地图的位置或得到浏览器/手机定位位置：

//MAPPE 
.controller('mapCtrl', function($scope, $ionicLoading, $ionicModal, $compile, $timeout) { 
     $scope.init = function() { 
     var myLatlng = new google.maps.LatLng(41.9100711,12.5359979); 
     var mapOptions = { 
      center: myLatlng, 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions); 
     $scope.markers = []; 
     var infoWindow = new google.maps.InfoWindow() 
     } 

     $scope.centerOnMe = function() { 
     if(!$scope.map) {return;} 
     $ionicLoading.show({ 
      template: 'Cerco la posizione...', 
      showBackdrop: false 
     }); 

     navigator.geolocation.getCurrentPosition(function(pos) { 
      $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); 
      var infoWindow = new google.maps.InfoWindow() 
      var marker = new google.maps.Circle({ 
       strokeColor: '#F90', 
       strokeOpacity: 0.8, 
       strokeWeight: 2, 
       fillColor: '#FC0', 
       fillOpacity: 0.35, 
       map: $scope.map, 
       center: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude), 
       radius: 100 
      }); 
      marker.content = '<div class="infoWindowContent">Tu sei qui</div>'; 
      google.maps.event.addListener(marker, 'click', function(){ 
      infoWindow.setContent('<h2>LA TUA POSIZIONE</h2>Questo è il punto indicato dal tuo GPS!</br>Se ci sono errori clicca sul punsante in basso a destra e scrivi il tuo indirizzo'); 
      infoWindow.open($scope.map, marker); 
      }); 
      $ionicLoading.hide(); 
      $scope.markers.push(marker); 

     }, function(error) { 
      alert('Unable to get location: ' + error.message); 
     }); 
    }; 

    $ionicModal.fromTemplateUrl('templates/position.html', {scope: $scope}).then(function(modal) {$scope.modal = modal}); 
    $scope.closePosition = function() {$scope.modal.hide()}; 
    $scope.searchPoint = function() {$scope.modal.show()}; 

    $scope.doPosition = function() { 
     geocoder = new google.maps.Geocoder(); 
     var address = document.getElementById('indirizzo').value; 
     var infoWindow = new google.maps.InfoWindow(); 
     geocoder.geocode({'address': address}, function(results, status){ 
     if (status == google.maps.GeocoderStatus.OK) { 
      var latlng = results[0].geometry.location; 
      var latiSearch = results[0].geometry.location.lat(); 
      var lonSearch = results[0].geometry.location.lng(); 
      $scope.map.setCenter(new google.maps.LatLng(latiSearch, lonSearch)); 
      var marker = new google.maps.Circle({ 
       strokeColor: '#F90', 
       strokeOpacity: 0.8, 
       strokeWeight: 2, 
       fillColor: '#FC0', 
       fillOpacity: 0.35, 
       map: $scope.map, 
       center: new google.maps.LatLng(latiSearch, lonSearch), 
       radius: 100 
      }); 
      $scope.map.panTo(marker.getPosition()); 
      marker.content = '<div class="infoWindowContent">Tu sei qui</div>'; 
      google.maps.event.addListener(marker, 'click', function(){ 
      infoWindow.setContent('<h2>'+address+'</h2>Questo è l\'indirizzo che hai indicato.</br> Ti ricordiamo che NESSUNO potrà vedere in dettaglio dove ti trovi, ma avrà solo un\'indicazione approssimativa in chilometri!'); 
      infoWindow.open($scope.map, marker); 
      }); 
      $scope.markers.push(marker); 
      $scope.map.panTo(marker.getPosition()); 
      $scope.closePosition(); 
     } else {alert('La geolocalizzazione non è andata a buon fine: ' + status)} 
     }); 
     $timeout(function(){$scope.closePosition()}, 1000) 
    } 
}) 

一切工作正常，但当收到位置或插入地址，并创建标记时，我收到此错误：

TypeError: marker.getPosition is not a function 
------> $scope.map.panTo(marker.getPosition()); 

因此panTo不工作！ 我的错误在哪里？

Answer 1

你正在为getPosition原因是未定义是因为，根据文档，它不存在，here's the link.

问题的根源实际上是要传递了错误的对象$scope.map.panTo();。 Please refer to the google website对于Map类上的panTo，您必须将它传递给参数中期望的相同类型的对象。

panTo(latLng:LatLng|LatLngLiteral);这就是说，它除了LatLng类或LatLngLiteral类的一个实例，而不是上面创建的Circle实例的参数。

Here's the reference to LatLng.

要解决你的代码上面你可以从这个改变：

$scope.map.panTo(marker.getPosition()); 

这个

$scope.map.panTo(new google.maps.LatLng(latiSearch, lonSearch)); 

我也建议来保存您上面已经创建实例对于$scope.map.setCenter()与您将在此处使用的相同。