1

我正在尝试为我的应用程序使用 ImageMapster 插件。在 html 中使用静态图像映射时效果很好。但我的问题是，当我通过 jquery 渲染图像和区域标签时，它不起作用。我正在使用 web api 来获取图像的属性。

这是我的脚本：

$(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 回答