角JS与谷歌地图支持+自动完成 [英] Angular JS with google maps support + autocomplete

问题描述

我最近开始angularjs工作，我正在做与谷歌地图的应用程序。
我做了一个模块，在那里我打电话给一个地图，我打电话到自动完成功能。自动完成工作，但地图上没有显示。

i recently started working with angularjs and i'm making an app with google maps. I've made a module where i call to a map and i call to an autocomplete function. The autocomplete works but the map is not showing

这是我的code的模块

this is my code for module

    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，然后把它放在谷歌地图？

Bonus: Also i want to put overlays on my map using data from my scope, how can i give the object the modelvalue and then put it in google maps?

推荐答案

我会推荐的第一件事是建立一个小提琴这样我们就可以看到正在传递什么样的模式，什么样的控制器样子，究竟发生在这里。

First thing I would recommend is to create a fiddle so that we can see what kind of model is being passed, what the controller looks like and what exactly is happening here.

我试图做类似的事情最近在我的情况下，问题是，发射指令可以加载模型前。这意味着，谷歌地图正在通过没有价值$ P $从渲染图pventing吧。

I was trying to do something similar recently and the problem in my case was that the directive fired before the model could be loaded. This meant that Google Maps was being passed no values preventing it from rendering a map.

要解决它的方法之一是看的ngmodel，在这里看到的更多信息： Angularjs传递对象指令

One way to get around it is by "watching" the ngmodel, see more information here: Angularjs passing object to directive

另一种方法是从你的控制器称之为地图功能。

The other way is to call the "map" function from your controller.

当然，你可以使用pre-内置指令太： http://nlaplante.github.com/angular-google-maps/#!/usage

Of course you could use a pre-built directive too: http://nlaplante.github.com/angular-google-maps/#!/usage

编辑：为叠加，你可以transclude并通过模型的指令范围与所有需要的叠加数据。然后再看这些模型，以确保它们被加载，一旦他们只是执行地图功能，并呈现出一张地图。

for overlays you could transclude and pass models to the directive scope with all the required overlay data. Then again "watch" these models to make sure that they are loaded and once they are just run the "map" function and render out a map.

这篇关于角JS与谷歌地图支持+自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！