Question

我最初使用ng-if隐藏了map元素。当ng-if评估为true时，我无法将标记添加到地图中。 map-element包含在html partial中 - 它不是初始html页面的一部分。

HTML：

<div ng-controller="MapCtrl">     
   <div style="width:100%;height:300px" ng-if="whatever">       
     <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
         ui-event="{'map-click': 'openMarkerInfo(marker)'}">
     </div>       
     <div id="map_canvas" ui-map="myMap" class="map"
         ui-event="{'map-click': 'addMarker($event, $params)', 'map-zoom_changed':  'setZoomMessage(myMap.getZoom())' }"
         ui-options="mapOptions">
     </div>
   </div>
   <div style="width:100%;height:300px;background:yellow" ng-click="showMap()">
   </div>
</div>

JS：

angular.module('doc.ui-map', ['ui.map','ngRoute'])
        .controller('MapCtrl', ['$scope','$timeout', function ($scope,$timeout) {



$scope.myMarkers = [];

$scope.mapOptions = {
        center: new google.maps.LatLng(35.784, -78.670),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
};

$scope.addMarker = function ($event, $params) {
        console.log('addMarker');

        $scope.myMarkers.push(new google.maps.Marker({
                map: $scope.myMap,
                position: $params[0].latLng
        }));          
};

$scope.setZoomMessage = function (zoom) {
        $scope.zoomMessage = 'You just zoomed to ' + zoom + '!';
        console.log(zoom, 'zoomed');
};

$scope.openMarkerInfo = function (marker) {
        $scope.currentMarker = marker;
        $scope.currentMarkerLat = marker.getPosition().lat();
        $scope.currentMarkerLng = marker.getPosition().lng();
        $scope.myInfoWindow.open($scope.myMap, marker);
};


$scope.showMap = function(){
        $scope.whatever = true;           
}

$scope.setMarkerPosition = function (marker, lat, lng) {
        marker.setPosition(new google.maps.LatLng(lat, lng));
};     
}]) ;

Answer 1

'ng-if'指令将根据表达式创建或删除DOM的一部分。启动地图应用程序时，ng-if表达式等于false。

因此map-ui元素不会附加到DOM树，并且'myMap'属性不会添加到控制器范围。这将使addMarker（）崩溃，因为$ scope.myMap === undefined 您可以尝试将以下代码添加到addMarker函数中，它应该在控制台上显示undefined：

console.log($scope.myMap);

尽管ng-show导致错误的地图宽度/高度问题，但您可以在初始化地图时通过调度“resize”事件来强制执行地图刷新。

如果要刷新地图，则需要在Google地图对象上触发“调整大小”事件。

google.maps.event.trigger(map,"resize");

我的例子：

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angular UI Map</title>
</head>
<body>
  <div id="map" ng-controller="mapCtrl">
    <input type="button" ng-click="showMap()"/>
    <div ng-show="isShow">
        <div id="map_canvas" ui-map="myMap" style="height:200px;width:300px" ui-event="{'map-click':'addMarker($event, $params)'}" ui-options="mapOptions">
    </div>
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
  <script src="js/angular-ui-utils/modules/event/event.js"></script>
  <script src="js/angular-ui-map/src/map.js"></script>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=onGoogleReady"></script>
  <script src="js/angularUIMap.js"></script>
  <script>
    function onGoogleReady(){
        angular.bootstrap(document.getElementById("map"),['mapApp']);
    }
  </script>
</body>
</html>

angularUIMap.js

angular.module("mapApp",['ui.map'])
.controller("mapCtrl",function($scope,$timeout){
  var mapInitFlag = false;
  $scope.showMap = function(){
    $scope.isShow = !$scope.isShow;
    if(!mapInitFlag)
    {
        $timeout(function(){
            google.maps.event.trigger($scope.myMap,'resize');
            mapInitFlag=true;
            console.log('adjust map');
        }); 
    }
  };

  $scope.myMarkers = [];

  $scope.mapOptions = {
    center: new google.maps.LatLng(35.784, -78.670),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  $scope.addMarker = function ($event, $params){
    $scope.myMarkers.push(new google.maps.Marker({
            map: $scope.myMap,
            position: $params[0].latLng
    }));          
  };
});

截图：

enter image description here

希望这有用。

居住在html partial中并使用ng-if隐藏的角度ui-map（谷歌地图）不会添加标记

1 个答案: