具有离子

Question

我正在构建一个只在主页面上只有jqvmap插件的移动应用程序，但是这个奇怪的错误一直在发生，有时地图显示正确，但有时它不是（图像低于）。

这是我的代码：

<ion-view title="Trouver du fret" style="background-color: #F7F7F7">

    <div class="MapContainer" style="width:100%;padding-top: 60px;" >

         <label class = "item item-input item-select">
           <div class = "input-label" style="white-space: normal;">
            Choisissez votre région
           </div>

            <select ng-model="selectedRegion" ng-change="gotoRegion(selectedRegion)">
                <option value="0"> --  </option>
                <option ng-repeat="reg in allRegions" value="{{reg.Region.id}}">
                    {{reg.Region.name}}
                </option>
            </select>
         </label>
         <div class="card">
            <div class="item item-text-wrap" id="francemap" style=" height: 450px;"></div>
         </div>  
    </div>
</ion-view>

我在'$ionicView.loaded'事件中启动了用于绘制地图的功能：

$('#francemap').vectorMap({
            map: 'france_fr',
            hoverOpacity: 0.5,
            hoverColor: "#0DC12D",
            backgroundColor: "#fff"  , //  "#F7F7F7",
            color: "#27ae60",
            borderColor: "#000000",
            selectedColor: "#0DC12D",
            enableZoom: false,
            showTooltip: true,
            onResize: function (element, width, height) {
                console.log('Map Size: ' +  width + 'x' +  height);
              },
            onRegionClick: $scope.regionClick
        });