1

アプリケーションにImageMapsterプラグインを使用しようとしています。HTMLで静止画像マップを使用する場合は正常に機能します。しかし、私の問題は、jqueryを介して画像と領域タグをレンダリングしているときに機能しないことです。画像の属性を取得するためにWebAPIを使用しています。

これが私のスクリプトです：

$(document).ready(function () {

       var iiim = "";
       var url = 'http://mobileappapi.azurewebsites.net/api/HomeApiImage';
       $.get(url, function (data) {
           iiim = data["BgImg"];
           var url = 'http://mobileappapi.azurewebsites.net/api/HomeApi';
           $.get(url, function (data) {


               $('#map_demo').prepend('<img  src="' + iiim + '" usemap="#usa" id="myimage" style="margin-top:43px;"/>')
               for (var i = 0; i < data.length; i++) {

                   $('#usa_image_map').append('<area href="#" coords="' + data[i].Node_Location + '" state="n' + i + '" shape="rect" title="' + data[i].Node_Title + '" />')


               }
           }, "jsonp");

       }, "jsonp");


       $('#myimage').mapster({

           fillColor: 'ff0000',
           fillOpacity: 0.3
       });
   });

これが私のhtmlコードです。

 <body>
<div id="map_demo"> 
</div>
    <map id="usa_image_map" name="usa">
    </map>


 </body>

助けてください、ありがとう。

4

1 に答える 1

1

$.get()AJAX関数です。.mapsterそのため、メソッドが実行される前に、新しい画像の生成が完了していません。

.mapsterイメージが作成された後、コールバックにコールバックを入れて.get、イメージが正しい時間に実行されることを確認する必要があります。

これを試して：

$(document).ready(function () {

    var iiim = "";
    var url = 'http://mobileappapi.azurewebsites.net/api/HomeApiImage';
    $.get(url, function (data) {
        iiim = data["BgImg"];
        var url = 'http://mobileappapi.azurewebsites.net/api/HomeApi';
        $.get(url, function (data) {
            $('#map_demo').prepend('<img  src="' + iiim + '" usemap="#usa" id="myimage" style="margin-top:43px;"/>')
            for (var i = 0; i < data.length; i++) {
                $('#usa_image_map').append('<area href="#" coords="' + data[i].Node_Location + '" state="n' + i + '" shape="rect" title="' + data[i].Node_Title + '" />')
            }
            $('#myimage').mapster({
                fillColor: 'ff0000',
                fillOpacity: 0.3
            });
        }, "jsonp");
    }, "jsonp");

});
于 2012-07-18T14:37:19.760 に答える