谷歌地圖不適用於角度指令

Question

GoogleMapsAPI的實現不會在目錄模板中發布地圖。 這是標記和代碼

<gmap-locator></gmap-locator>   

。

app.directive('gmapLocator', function () {
    var link = function (scope, element, attrs) {
                var map, mapOptions, markers;
                var lat = scope.mapParameters.initialSettings.Lat;
                var lng = scope.mapParameters.initialSettings.Lng;
                mapOptions = {
                    mapTypeId : google.maps.MapTypeId.ROADMAP,
                    center: new google.maps.LatLng(lat, lng),
                    zoom: scope.mapParameters.initialSettings.zoom
                };


                function initMap() {
                    if (map === void 0) {
                        map = new google.maps.Map(element[0], mapOptions);

                    }
                }
                initMap();
            }
            return {
                restrict: 'EA',
                scope: {
                    mapParameters: '='
                },
                template: "<div id='gomap' style='height: 400px;width:300px'></div>",
                controller: controller,
                link: link
            }
            return {
                restrict: 'EA',
                template: '<div id="gomap" style="width: 450px;height:400px;"></div>',
                link: link
            };
        });

Google Maps庫不會檢測到目標div並發布地圖。

Answer 1

發生這種情況是因為<div id="gomap"..被發布為指令元素<gmap-locator map-parameters="mapParameters"></gmap-locator>的子元素，因此initmap函數中的GoogleMaps初始化代碼應改為

map = new google.maps.Map(element[0].children[0], mapOptions);

或簡單地使用document.getElementById('gomap')而不是使用元素parameter(element[0] ）。

或另一種方法是在指令return中使用replace：true

return {
                restrict: 'EA',
                replace: true,
                ....

但是，看起來AngularJS已棄用了replace選項。