イメージのサイズ変更に関連してイメージ上のspan要素を作成する方法は？

Question

私はオフィスレイアウト上のすべての従業員を探しているアプリケーションを持っています。私はオフィスのレイアウトイメージを持っていて、各従業員のJsonはレイアウト上の従業員の位置を示すxとyの座標を持っています。イメージはパネルに配置され、ウィンドウのサイズを変更するとイメージもそれに応じてサイズ変更されます。しかし、従業員の所在地は変更されません。コントローラに

<div class='col-lg-7 col-md-6 col-sm-12'> 
      <div class='row'> 
       <div class='col-xs-12'> 
        <div class='panel panel-default'> 
         <div class='panel-body'> 
          <div id="empMap"> 
           <img rel="prefetch" alt="Image is not found" ng-src="{{officeImage}}" id="empMap" style="width: 100%;height: 100%; z-index: -1" onerror="this.src='/img/OfficeImageNotAvailable.png'"> 
           <div> 
            <div ng-repeat="emp in employees"> 
             <span class="glyphicon glyphicon-oil" id="{{emp.empId}}" ng-click="empDisplay($event)" ng-dblclick="empInfo($event)" 
               ng-style="{'cursor': 'pointer','color':'green','position': 'absolute', 
               'left': xValue + emp.location.xcoordinate, 'top': yValue - emp.location.ycoordinate, 'z-index': '2'}"/> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
</div> 

コード：：以下は、私のコードで私は上記のコードでやっている何を

$("#empMap").load(function() {//loading the image of the plant 
      img_width = this.width; 
      img_height = this.height; 
      console.log("getting the values of the images"); 
      var img_left = $("#empMap").position().left; 
      var img_top = $("#empMap").position().top; 
      var y = img_height + img_top; 
      $scope.xValue = img_left; 
      $scope.yValue = y -14; 
}); 

は私がトップ、左の高さと幅の値からはxValueとyValueを計算していますということです画像と私のHTMLでは、この値にxとyの座標値を加えています。

画像のサイズを変更したときにどのように位置を移動できるかわかりません。また、従業員の場所が正しく表示されません。だから、私がここで紛失しているものと、このシナリオではより良いアプローチとなるものを教えてください。

Answer 1

この関数は、ページが最初に読み込まれたときにのみ実行され、ブラウザウィンドウのサイズが変更されたときに位置を再計算するために関数を再度呼び出す必要があります。

$(window).resize(function() { 
    Actions Go Here 
}); 

あなたの最善の策は、おそらくあなたのコードが乾燥しているように.LOADと.resizeの両方からそれを呼び出して、独自に関数として、あなたの位置計算を確立することです。