谷歌地图隐藏并显示地图

Google Map Hide and show Map

本文关键字：地图 显示 隐藏 谷歌地图      更新时间：2023-10-15

我使用angularjs，使用ng-if来显示和删除一个从谷歌地图中显示地图的指令，但每次删除该指令并重新放置时，地图都不会加载并变灰。有人知道我该怎么解决这个问题吗。

这是手风琴编码：

<uib-accordion close-others="oneAtATime">
        <uib-accordion-group ng-repeat="mission in missions" is-open="status.open">
            <uib-accordion-heading >
                <div class="noOutline">
                    <i class="fa fa-map-o fa-2x pull-left"></i>
                    {{mission.description}}
                    {{status.open}}
                </div>
            </uib-accordion-heading>
            <missions-Map id='map' missionId='20' ng-if="status.open"></missions-Map>
        </uib-accordion-group>
    </uib-accordion>

这是指令代码：

angular.module("dronesIntershipProject").directive('missionsMap', function () {
var opened = false;
return {
    restrict: 'E',
    template: "<div></div>",
    replace: true,
    link: function(scope, element, attrs) {
        console.log(attrs.ngIf);
        var myLatLng = new google.maps.LatLng(20,20);
        var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            scrollwheel: true,
            zoom: 8
        });
        var marker =  new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: "My Marker"
        });
        marker.setMap(map);
        document.getElementById('map').removeAttribute("ng-if");
        console.log(element);
    }
}

您是否尝试过使用ng-show而不是ng-if？

ngIf文件规定：

ngIf指令删除或重新创建DOM树的一部分基于｛表达式｝。如果指定给ngIf的表达式计算为false值，则从DOM中删除该元素，否则为元素的克隆被重新插入到DOM中。

在创建映射时，您可以附加到map元素，但一旦ngIf删除了它，它就会消失。你必须重新创建地图，这样它才能再次出现。

ngShow的文档说明：

ngShow指令显示或隐藏给定的HTML元素基于提供给ngShow属性的表达式。元素如图所示或通过将.ng隐藏CSS类删除或添加到要素

通过使用ng-show，您将能够实现您的目标，因为它只是通过向元素添加CSS类来隐藏元素，而不是像ng-if那样从DOM中完全删除它。

相关文章：