支持谷歌地图的 Angular JS + 自动完成答案

【问题标题】：Angular JS with google maps support + autocomplete支持谷歌地图的 Angular JS + 自动完成
【发布时间】：2013-01-02 09:49:06
【问题描述】：

我最近开始使用 angularjs，并且正在使用谷歌地图制作应用程序。我制作了一个模块，在其中调用地图并调用自动完成功能。自动完成功能有效，但地图未显示

这是我的模块代码

    module.directive('googleplace', function() {
    return {
        require: 'ngModel',
        replace: true,
        link: function(scope, element, attrs, model) {
            var options = {
                types: []
            };
            var myOptions = {
                zoom: 6,
                center: new google.maps.LatLng(51.228388, 4.405518),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            scope.gPlace = new google.maps.places.Autocomplete(element[0], options);

            google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
                scope.$apply(function() {
                    console.log(element.val());
                    console.log(element);
                    model.$setViewValue(element.val());                
                });
            });
            var map = new google.maps.Map(document.getElementById(attrs.id), myOptions);
            console.log(map);
        }
    };
});

奖励： 另外我想使用我的范围内的数据在我的地图上放置叠加层，我怎样才能给对象模型值，然后把它放在谷歌地图中？

【问题讨论】：

标签： google-maps angularjs google-maps-api-3 autocomplete

【解决方案1】：

我建议的第一件事是创建一个小提琴，这样我们就可以看到正在传递的模型类型、控制器的外观以及这里到底发生了什么。

我最近尝试做类似的事情，我的问题是在模型加载之前触发了指令。这意味着 Google 地图没有被传递任何值来阻止它呈现地图。

绕过它的一种方法是“观察” ngmodel，在此处查看更多信息：Angularjs passing object to directive

另一种方法是从控制器调用“地图”函数。

当然，您也可以使用预先构建的指令：http://nlaplante.github.com/angular-google-maps/#!/usage

编辑：对于覆盖，您可以使用所有必需的覆盖数据将模型转换并传递到指令范围。然后再次“观察”这些模型以确保它们已加载，一旦它们运行“地图”功能并渲染出地图。

【讨论】：

【解决方案2】：

试试这个也许对你有帮助。

首先安装 Bower

-> bower install vs-google-autocomplete

将 Google Places 库脚本添加到您的 index.html

将 vs-google-autocomplete.js 添加到您的 index.html。

【讨论】：