Question

我最近开始使用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);
        }
    };
});

加成： 此外，我想使用我的示波器中的数据在我的地图上叠加，如何为对象提供modelvalue然后将其放入谷歌地图？

Answer 1

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

我最近尝试做类似的事情，我的案例中的问题是在加载模型之前触发了指令。这意味着谷歌地图没有传递任何阻止它渲染地图的值。

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

另一种方法是从控制器调用“map”功能。

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

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

Answer 2

试试这个可能对你有帮助。

首先安装Bower

- ＆GT; bower install vs-google-autocomplete

将Google商家信息库脚本添加到index.html

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

带谷歌地图的Angular JS支持+自动完成功能

2 个答案: