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();。对于Map类的panTo Please refer to the google website，你必须在参数中传递它所期望的相同类型的对象。

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()创建的实例存储到您将在此处使用的实例。

Angularjs google地图标记和panTo不起作用

1 个答案: