首页 > react中使用Jquery.adamMap.js出现事件无法触发的问题

react中使用Jquery.adamMap.js出现事件无法触发的问题

React 部分的代码:

var SqMap = React.createClass({
    componentDidMount: function () {

        this.initMap();


    },
    render: function () {
        return (
            <div id="SqMap">
              
                <div id="szmap" ref="szmap">
                    <img src="images/123456.jpg" width="390" data-usemap="#Map" id="AMAP" border="0"/>
                </div>

            </div>

        );
    },
    initMap: function () {

        /* 地图 js */
        var aPoint = [
            '<area shape="polygon" coords="269,54,274,58,275,47,282,45,288,53,291,59,283,70,286,76,293,79,299,83,295,91,292,96,283,104,274,107,270,109,267,106,266,112,261,113,253,112,245,111,240,111,235,114,232,110,228,103,224,99,225,93,238,91,245,86,251,80,254,73,253,64,262,56,268,54" info="坪山新区" title="坪山新区" href="?a=11&type=<?php echo $type;?>&start_time=<?php echo $startTime?>&end_time=<?php echo $endTime;?>"/>',

            '<area shape="polygon" coords="333,178,343,174,346,177,352,175,359,171,366,169,372,165,375,161,372,156,367,152,367,149,367,147,363,146,358,147,353,145,350,144,343,139,342,136,336,135,332,137,330,141,327,145,322,143,321,138,323,133,325,129,330,127,337,127,341,128,345,124,354,116,357,111,361,105,361,100,355,97,350,99,346,101,337,101,331,101,326,101,324,94,313,94,310,96,303,93,296,95,285,103,277,106,269,108,267,108,264,113,261,114,255,113,254,116,252,120,256,122,258,125,265,121,273,119,279,119,285,121,291,124,293,132,296,139,302,136,306,144,313,149,314,155,313,162,313,169,315,174,314,179,320,182,320,188,328,188,333,184,337,178,340,175"  info="大鹏新区" title="大鹏新区" href="?a=9&type=<?php echo $type;?>&start_time=<?php echo $startTime?>&end_time=<?php echo $endTime;?>"/>',

            '<area shape="polygon" coords="86,28,75,28,69,29,63,36,60,41,57,43,52,44,51,50,56,56,60,61,59,68,60,72,58,75,58,78,58,82,58,86,64,83,68,83,71,77,77,77,86,77,93,74,100,76,109,68,113,65,111,59,108,58,112,55,111,49,109,44,108,39,105,38,100,34,95,32,88,28"  info="光明新区" title="光明新区" href="?a=10&type=<?php echo $type;?>&start_time=<?php echo $startTime?>&end_time=<?php echo $endTime;?>" />',

            '<area shape="polygon" coords="93,76,96,81,94,86,93,91,94,99,92,102,87,104,83,109,83,116,80,121,80,127,81,132,78,136,76,139,62,151,55,143,49,142,48,138,36,127,24,112,19,101,20,96,19,92,16,86,15,83,15,75,14,69,13,64,22,59,25,56,24,50,28,48,28,45,32,46,34,41,40,41,44,35,43,28,48,24,53,24,57,23,60,18,64,18,68,19,73,21,77,22,83,20,87,23,85,28,77,28,71,29,63,34,59,40,54,44,49,47,53,54,58,59,59,65,58,69,60,72,56,77,58,80,57,82,58,85,63,82,67,81,71,77,77,77,85,76,91,76,94,76,96,76"  info="宝安区" title="宝安区" href="?a=6&type=<?php echo $type;?>&start_time=<?php echo $startTime?>&end_time=<?php echo $endTime;?>" />',

            '<area shape="polygon" coords="54,158,48,152,48,146,46,144,43,143,41,142,42,147,43,151,44,154,44,157,45,160,49,163,52,165,54,165,56,170,58,174,61,178,62,180,64,177,65,180,66,186,69,187,71,181,75,179,77,171,82,171,86,174,88,172,92,173,93,164,99,161,105,160,107,158,110,151,111,143,114,137,114,132,121,131,121,126,116,118,112,112,108,111,103,108,99,106,97,101,90,103,86,105,84,109,82,115,82,119,80,122,80,128,82,130,79,135,76,138,73,143,66,147,63,150,61,154,60,156,55,159,54,159"  info="南山区" title="南山区" href="?a=4&type=<?php echo $type;?>&start_time=<?php echo $startTime?>&end_time=<?php echo $endTime;?>" />',

            '<area shape="polygon" coords="98,75,93,76,97,80,97,83,94,88,93,93,94,100,97,103,98,106,102,108,107,110,110,111,115,115,117,118,120,122,121,125,121,129,127,129,130,130,134,129,138,128,140,127,138,123,136,120,135,116,133,113,135,108,134,104,133,100,135,95,140,93,143,93,146,95,148,97,151,94,152,91,151,87,153,87,150,83,151,80,156,77,158,72,156,68,154,64,152,60,145,60,142,64,139,60,137,58,134,57,132,54,132,52,126,52,121,54,115,54,110,55,109,59,113,64,108,68,103,75,99,75"  info="龙华新区" title="龙华新区" href="?a=7&type=<?php echo $type;?>&start_time=<?php echo $startTime?>&end_time=<?php echo $endTime;?>" />',

            '<area shape="polygon" coords="108,159,114,155,118,156,125,157,127,160,129,163,133,164,138,165,140,161,143,159,148,160,149,156,148,154,152,152,154,152,156,146,155,138,150,137,147,136,143,135,141,131,139,130,135,129,130,129,124,129,121,130,115,131,113,138,111,141,110,145,108,152,108,157"  info="福田区" title="福田区" href="?a=2&type=<?php echo $type;?>&start_time=<?php echo $startTime?>&end_time=<?php echo $endTime;?>" />',

            '<area shape="polygon" coords="185,99,180,98,177,98,176,94,182,93,182,89,179,86,177,85,177,83,174,81,172,79,171,74,166,74,161,72,158,72,153,77,150,80,152,85,151,89,153,92,151,96,147,98,143,93,139,94,133,99,133,103,134,107,134,113,136,117,138,123,141,126,146,123,151,124,155,126,158,128,162,127,166,128,173,127,177,122,185,118,191,117,195,120,199,123,202,124,204,129,208,124,211,118,217,114,223,113,220,107,220,103,223,100,224,94,230,92,240,90,248,81,253,78,255,71,253,67,254,62,259,58,262,53,260,48,256,47,258,42,259,36,254,34,249,34,247,37,244,37,238,39,237,40,234,36,230,40,228,40,221,44,217,45,213,42,211,40,209,35,204,35,199,41,194,42,189,44,188,47,189,52,193,55,196,58,198,62,199,65,197,70,197,74,194,74,193,79,191,84,191,89,190,92,187,95,186,97"  info="龙岗区" title="龙岗区" href="?a=8&type=<?php echo $type;?>&start_time=<?php echo $startTime; ?>&end_time=<?php echo $endTime;?>"  />',

            '<area shape="polygon" coords="139,129,143,133,143,135,148,136,152,137,155,137,156,142,156,145,155,149,155,151,158,153,160,154,165,152,169,149,175,149,177,148,178,143,182,141,186,141,189,142,192,143,198,142,198,138,197,135,200,135,204,130,202,125,197,122,194,121,191,117,185,117,179,122,173,126,167,127,157,127,152,126,146,123,139,127"  info="罗湖区" title="罗湖区" href="?a=3&type=<?php echo $type;?>&start_time=<?php echo $startTime?>&end_time=<?php echo $endTime;?>" />',

            '<area shape="polygon" coords="209,148,204,143,199,143,198,143,198,139,196,137,199,135,201,132,205,128,208,123,211,117,216,114,221,114,223,113,220,107,220,104,222,101,226,101,230,106,232,110,233,113,236,113,239,111,243,111,252,113,255,113,254,119,255,122,258,123,257,126,252,128,251,123,246,123,245,125,241,127,241,130,242,134,241,136,239,138,235,139,228,139,225,137,220,136,213,144,210,148"  info="盐田区" title="盐田区" href="?a=5&type=<?php echo $type;?>&start_time=<?php echo $startTime?>&end_time=<?php echo $endTime;?>" />'

        ];


        AMAP.making(
            {
                img: "AMAP",//图片id
                imgWidth: 390,//图片宽
                imgHeight: 207,//图片高
                points: aPoint,// 坐标列表 aPoint
                fill: "#fff",//填充颜色
                fillOpacity: .5,//透明度
                strokeFill: "#00AADD",//边框颜色
                strokeWidth: 1,//边框宽度
                event: "mouseover",//绑定事件
                def: "龙岗区"//是默认城市
            }
        );

    }
});

使用到的jquery插件:
http://www.jq-school.com/upload/20130418110955593/jQuery.adamMap.1.0.js

问题:没有使用react的情况下,没有问题。加入到react中后,onmouseover事件无法触发了,如何破?

【热门文章】
【热门文章】