Angular JS与谷歌地图支持+自动完成

我最近开始使用angularjs，我正在制作一个谷歌地图的应用程序。我已经做了一个模块，我打电话给一个地图，我打电话给一个自动完成功能。自动完成工作，但地图上没有显示Angular JS与谷歌地图支持+自动完成

这是我模块代码

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); 
     } 
    }; 
});

奖励： 此外，我希望把叠加使用从我的范围数据我的地图，我怎么给该对象的模型值，然后把它放在谷歌地图？

来源

2013-01-18 Wannes

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

我正在尝试最近做类似的事情，在我的情况下，问题是在模型可以加载之前触发指令。这意味着Google地图不会传递任何值，从而无法呈现地图。

一种方法来解决它是由“看”的ngmodel，在这里看到的更多信息：Angularjs passing object to directive

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

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

编辑：为叠加，你可以transclude并通过模型的指令范围与所有需要的覆盖数据。然后再次“观察”这些模型，确保它们已加载，并且只需运行“地图”功能并渲染出地图即可。

来源

2013-02-18 18:51:22 winkerVSbecks

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

首先安装鲍尔

- >凉亭安装VS-谷歌，自动完成

添加谷歌地方图书馆脚本您的index.html

添加VS- google-autocomplete.js到你的index.html。

来源

2017-04-17 06:55:55

Angular JS与谷歌地图支持+自动完成

回答

相关问题