1

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

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

4

2 回答 2

1

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

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

解决它的一种方法是“观察” ngmodel，在此处查看更多信息：Angularjs 将对象传递给指令

另一种方法是从您的控制器调用“地图”功能。

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

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

于 2013-02-18T18:51:22.107 回答
-1

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

首先安装 Bower

-> 凉亭安装 vs-google-autocomplete

  1. 将 Google 地方信息库脚本添加到您的 index.html

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

于 2017-04-17T06:55:55.147 回答