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地图库无法检测目标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]）。

或另一种方法是在指令返回

中使用replace：true

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

但看起来AngularJS已经折旧了替换选项。

谷歌地图在角度指令中不起作用

1 个答案: