首页 文章

基本的AngularJS谷歌 Map

提问于
浏览
2

我对角度很新,并且正试图刺破角谷歌 Map .

我的要求 . 我有一个搜索栏,用于搜索餐馆 . 搜索结果api给出了用户搜索的餐馆的地址,纬度和经度 . 我想要的是显示一个标记映射餐厅在 Map 上的位置 .

我试过https://github.com/nlaplante/angular-google-maps/ . 它渲染 Map ,但不会将 Map 居中到纬度和我想要的长度 . 显然我试图从搜索API中映射lat和long

我想知道是否有人有类似我的用例并且有一个我可以遵循的例子 .

感谢帮助 .

1 回答

  • 7

    更新:下面的链接似乎已经死了 . 使用这个: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告诉 Map 在哪里居中 .

    希望这可以帮助!

相关问题