javascript - 基本的 AngularJS 谷歌地图

Question

我对角度相当陌生，并试图在角度谷歌地图上进行尝试。

我的要求。我有一个用于搜索餐馆的搜索栏。搜索结果 api 为我提供了用户搜索的餐厅的地址、纬度和经度。我想要的是在地图上显示一个映射餐厅位置的标记。

我试过https://github.com/nlaplante/angular-google-maps/。它渲染地图，但不会将地图居中到我想要的纬度和经度。显然我试图从搜索 api 映射纬度和经度

我想知道是否有人有与我类似的用例并且有一个我可以效仿的例子。

帮助表示赞赏。

Answer 1

更新：下面的链接似乎已经死了。使用这个：http ://angular-ui.github.io/angular-google-maps/#!/

听起来这里的例子就是你所要求的：http ://nlaplante.github.io/angular-google-maps/#!/demo

看看 DemoController 的来源（http://nlaplante.github.io/angular-google-maps/js/demo-controller.js）：

module.controller("DemoController", function ($scope, $location) {

        $scope.$watch("activeTab", function (newValue, oldValue) {
            if (newValue === oldValue) {
                return;
            }

            if ($location.path() != $scope.activeTab) {
                $location.path($scope.activeTab);
            }
        });

        $scope.getNavClass = function (item) {
            return item == $scope.activeTab ? "active" : "";
        };

        // default location
        $scope.center = {
            latitude: 45,
            longitude: -73
        };

        $scope.geolocationAvailable = navigator.geolocation ? true : false;

        $scope.latitude = null;
        $scope.longitude = null;

        $scope.zoom = 4;

        $scope.markers = [];

        $scope.markerLat = null;
        $scope.markerLng = null;

        $scope.addMarker = function () {
            $scope.markers.push({
                latitude: parseFloat($scope.markerLat),
                longitude: parseFloat($scope.markerLng)
            });

            $scope.markerLat = null;
            $scope.markerLng = null;
        };

        $scope.findMe = function () {

            if ($scope.geolocationAvailable) {

                navigator.geolocation.getCurrentPosition(function (position) {

                    $scope.center = {
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude
                    };

                    $scope.$apply();
                }, function () {

                });
            }   
        };
    });

您可以使用 $scope.center 告诉地图在哪里居中。

希望这可以帮助！