在angular指令中出现谷歌地图API错误

Error from google maps API when in an angular directive

本文关键字：谷歌地图 API 错误 angular 指令      更新时间：2023-09-26

我试图创建一个简单的角指令，其中添加谷歌地图的地方搜索框的输入。参见Google Developers上的这个例子。我甚至不需要地图，只需要搜索框。

指令成功运行(搜索框对象的控制台打印成功)，但在它运行后，我在控制台上得到一个错误，输入不起作用。控制台的错误是Uncaught TypeError: undefined is not a function .

只是为了确定，我在它旁边使用另一个指令，它使用jquery-ui初始化了一个日期选择器。这似乎很好。

HTML: 

<html ng-app="events">      
    <body>
        <h1>Hello Plunker!</h1>
        Date:
        <input type="text" datetime-input="format" />
        <br>
        Location:
        <input type="text" location-input="format" />
    </body>
</html>

JS: 

var events = angular.module('events', []);
events.directive('locationInput', function() {
    function link(scope, element, attrs) {
        scope.searchBox = new google.maps.places.SearchBox(element);
        console.log(scope.searchBox);
    }
    return {
        link: link
    };
});
events.directive('datetimeInput', function() {
    function link(scope, element, attrs) {
        $(element).datepicker();
    }
    return {
        link: link
    };
});

查看我创建的Plunkr

为什么会出现错误?我做错了什么?

问题是元素不是回调的正确格式，您必须执行element[0]。之后，您必须附加一个侦听器。你的代码看起来像这样:

scope.searchBox = new google.maps.places.SearchBox(element[0]);
google.maps.event.addListener(scope.searchBox,'places_changed',function(){
    var places = searchBox.getPlaces();
    for(var i =0, place;place=places[i];i++){
        console.log(place.icon+':'+place.name+':'+ place.geometry.location);
    }
})
相关文章：