标记位置不正确

Question

我正在使用 Ionic 中的 $http 服务来动态加载 Google 地图标记，我使用的是这种方法：

google.maps.Geocode

要提供经纬度，但此代码会引发一些错误。

facebookExample.controller('carteController', function ($scope, $ionicLoading, $location, $cordovaGeolocation, $compile, $http) {
    $scope.back = function () {
        $location.path("/accueil");
    }

    $scope.init = function () {
        $http.get('http://@ip:8080/elodieService/categories/', {
            params: {
                fields: "nomcategorie,typecategorie",
                format: "json"
            }
        }).then(function (result) {
            console.log("SUCCESS!" + result.data);
            console.log(JSON.stringify(result));
            $scope.categorieData = result.data;
        });

        var options = {timeout: 10000, enableHighAccuracy: true};

        $cordovaGeolocation.getCurrentPosition(options).then(function (position) {
            var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            var mapOptions = {
                center: latLng,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
            google.maps.event.addListenerOnce($scope.map, 'idle', function () {
                var marker = new google.maps.Marker({
                    map: $scope.map,
                    animation: google.maps.Animation.DROP,
                    position: latLng
                });

                $http.get('http://@ip/elodieService/evenements/', {
                    params: {
                        fields: "adresse",
                        format: "json"
                    }
                }).then(function (result) {

                    console.log("SUCCESS!" + result.data);
                    console.log(JSON.stringify(result));
                    $scope.adresseData = result.data;
                    console.log("result.data: ", result.data.adresse);

                    var records = result.data;
                    for (var i = 0; i < records.length; i++) {

                        var record = records[i];
                        var adresse = record.adresse;
                        console.log("adresse obtenu par web service");
                        console.log(adresse);
                        var resultat = "";
                        geocoder = new google.maps.Geocoder();
                        geocoder.geocode({'address': adresse}, callback);
                        function callback(results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {

                                console.log("results[0].geometry.location");
                                console.log(results[0].geometry.location.latitude);

                                lat = results[0].geometry.location.lat();
                                console.log("lat");
                                console.log(lat);
                                lng = results[0].geometry.location.lng();
                                console.log("lng");
                                console.log(lng);
                                console.log(JSON.stringify(results));
                                var markerPos = new google.maps.LatLng(lat[i], lng[i]);
                                var marker = new google.maps.Marker({
                                    map: $scope.map,
                                    animation: google.maps.Animation.DROP,
                                    position: markerPos
                                });
                            } else {
                                console.log(status);
                            }
                        }
                    }
                });

                var infoWindow = new google.maps.InfoWindow({
                    content: "Here I am!"
                });

                google.maps.event.addListener(marker, 'click', function () {
                    infoWindow.open($scope.map, marker);
                });

                console.log(status);

            }, function (error) {
                console.log("Could not get location");
            });
        });
    }
});

carte.html

<ion-view title="Carte" ng-init="init()">
       <ion-content>
      <div id="map" data-tap-disabled="true"></div>
     </ion-content>
 </ion-view>

错误：

incorrect marker location

我该如何解决？

Answer 1

您将不正确的值传递给 LatLng class 作为 lat[i]、lng[i]。索引位置[i]无效。

所以像这样更改您的代码：

lat = results[0].geometry.location.lat();
console.log("lat");
console.log(lat);
lng = results[0].geometry.location.lng();
console.log("lng");
console.log(lng);
console.log(JSON.stringify(results));
var markerPos = new google.maps.LatLng(lat, lng);  // << Fix it here

甚至，您不必定义 lat 和 lng，因为您是从 LatLng 实例中获取的。

if (status == google.maps.GeocoderStatus.OK) {
    console.log("results[0].geometry.location", results[0].geometry.location, JSON.stringify(results));

    // No need to initialize again as the "results[0].geometry.location" is an instance of LatLng class itself
    var markerPos = results[0].geometry.location;

    var marker = new google.maps.Marker({
        map: $scope.map,
        animation: google.maps.Animation.DROP,
        position: markerPos
    });
}

参见Geocoding Results：

results[]: {
 types[]: string,
 formatted_address: string,
 address_components[]: {
   short_name: string,
   long_name: string,
   postcode_localities[]: string,
   types[]: string
 },
 partial_match: boolean,
 place_id: string,
 postcode_localities[]: string,
 geometry: {
   location: LatLng,
   location_type: GeocoderLocationType
   viewport: LatLngBounds,
   bounds: LatLngBounds
 }
}

标记位置不正确

Incorrect marker location

google-maps

google-geocoder

angularjs

ionic-framework