动态改变map-area区域背景色
前几天公司项目地图需要改版,要求地图区域根据数据指定背景色
方法一:根据数据动态切图,会有区域*区域各图产生
方法二:采用插件效果图这个是一不小心看到的。然后就一点点扣代码,最终发现是个插件。
html代码`
<img src="${ctx.contextPath}/tkms/images/cz5.png" usemap="#Map" id="imgsrc" title="" width="640px" height="700px" class="maphilighted1" style="opacity: 0; position: absolute; left: 20px; top: 50px; padding: 0px; border: 0px;"> </div> <map name="Map" id="Map"> <area id="xzq1" style="outline: none;" shape="poly" href="tkqy?xzq=1" xzq="1" title="溧阳市" coords="95,216,97,217,99,217,101,219,104,219,106,219,108,219,108,221,109,224,106,225,105,225,103,224,101,223,100,224,99,224,99,226,100,228,100,229,101,231,101,233,103,234,104,236,106,238,108,240,109,242,111,243,112,245,114,247,115,247,118,247,118,246,119,246,121,244,122,243,125,244,125,246,126,248,128,247,129,247,131,249,133,251,134,254,136,256,137,258,138,261,140,263,141,264,144,266,147,267,149,268,150,268,152,270,152,272,154,273,155,273,157,272,158,271,162,269,162,271,164,273,166,275,168,276,171,277,173,278,175,278,176,278,180,279,184,278,186,278,190,278,194,278,196,278,199,278,201,279,205,281,206,281,210,281,213,281,216,281,218,280,220,280,222,280,227,278,229,279,232,281,232,283,230,286,229,288,228,291,226,294,224,296,224,299,223,301,222,303,221,307,220,310,219,311,218,313,216,314,215,314,212,314,212,314,210,316,210,317,210,320,210,321,212,323,213,325,214,327,214,329,213,331,212,333,212,334,213,335,213,335,215,336,217,336,220,336,221,337,220,340,220,343,219,346,218,348,217,350,215,352,215,354,214,354,211,354,208,354,205,356,204,357,204,360,204,362,202,364,200,364,198,366,197,367,198,369,199,371,199,372,198,375,197,378,196,381,194,385,192,389,191,392,191,395,191,399,191,402,192,404,194,406,194,409,192,411,190,414,189,416,189,418,189,421,190,422,190,423,191,426,192,427,193,429,195,431,194,433,194,435,194,437,194,440,194,442,194,445,193,448,193,450,192,451,191,453,189,455,190,457,191,458,194,460,195,462,195,465,196,467,198,467,200,467,202,468,203,471,203,473,203,476,203,479,203,482,202,485,203,487,203,490,202,492,200,496,197,498,195,500,194,502,192,501,189,503,186,504,182,504,179,503,177,502,174,501,172,501,171,504,171,506,170,505,169,504,166,504,164,504,161,505,160,505,158,504,157,500,157,498,155,496,152,494,150,494,148,494,147,491,147,490,145,489,143,490,142,492,140,493,137,494,136,494,135,492,134,492,131,495,130,496,127,497,125,496,125,494,126,491,127,489,127,488,128,486,124,486,120,485,118,485,115,481,114,477,114,475,114,472,114,470,114,468,113,467,112,464,112,462,113,460,114,459,116,457,116,455,117,453,119,451,119,447,120,445,118,444,117,442,117,441,117,439,117,438,117,436,116,434,116,433,115,431,113,429,112,429,110,428,109,428,108,429,108,431,108,432,108,433,107,436,106,437,106,440,106,443,106,446,105,448,102,448,100,447,95,447,91,446,87,444,83,444,82,445,80,447,78,447,74,448,73,449,69,450,67,450,65,448,64,446,61,448,60,450,59,451,56,450,53,449,51,447,49,447,48,444,47,444,45,446,43,444,42,442,39,443,37,444,35,441,35,438,35,435,35,432,32,430,30,428,29,425,30,423,32,421,33,420,33,418,33,415,33,412,35,410,37,408,39,405,40,403,42,402,43,401,43,398,41,397,39,395,37,393,36,390,34,387,33,385,30,383,27,381,25,379,23,377,22,374,22,371,21,369,21,366,21,364,21,362,21,360,21,359,21,356,21,355,20,353,19,352,18,351,16,351,13,351,11,350,10,348,10,347,8,346,8,344,9,343,10,342,10,342,11,340,12,339,13,338,13,336,14,335,14,333,16,331,16,330,16,328,15,327,14,325,13,322,14,320,18,319,20,318,22,318,24,316,24,316,26,315,28,314,30,314,31,312,33,309,34,306,35,305,35,302,34,301,30,301,28,301,28,298,28,295,28,291,29,290,32,289,34,288,36,288,37,287,38,285,39,283,39,281,40,280,40,279,42,278,44,278,44,276,44,274,44,271,45,267,47,264,48,261,50,259,50,256,50,254,51,252,52,250,53,247,56,245,59,245,61,244,64,245,66,244,68,240,71,238,73,237,75,236,77,235,79,233,81,232,83,232,84,229,85,228,87,226,88,225,90,223,91,220,92,218,94,218" /> <area id="xzq2" style="outline: none;" shape="poly" href="tkqy?xzq=2" xzq="2" title="金坛区" coords="93,216,96,216,98,216,101,218,102,219,104,219,106,219,108,219,108,222,109,224,108,225,105,225,103,224,101,224,100,225,100,228,100,229,102,231,102,234,103,236,104,236,105,239,107,241,108,242,111,244,113,246,115,247,118,246,119,245,121,244,122,244,124,246,124,247,126,248,127,247,129,248,130,249,131,250,133,252,135,254,135,256,137,258,138,260,140,262,141,263,143,265,145,266,147,267,149,268,151,269,152,271,153,272,154,273,156,272,156,271,159,270,161,270,162,271,165,273,167,275,169,276,171,277,173,278,177,278,179,279,183,279,185,279,188,278,190,278,192,278,195,278,197,278,199,278,200,279,203,280,206,281,209,281,211,281,214,281,216,281,218,280,221,280,223,280,225,279,227,279,229,280,231,281,231,282,232,283,234,284,234,284,236,283,238,282,239,281,241,279,241,278,241,276,243,275,244,273,244,271,244,270,244,268,244,266,244,264,244,262,244,261,245,259,247,259,250,258,252,258,255,257,257,257,258,255,258,253,259,251,261,249,263,247,265,245,265,244,266,241,266,239,266,236,266,235,266,233,267,232,268,231,269,230,270,230,271,229,272,228,272,227,271,225,272,222,272,220,272,218,271,216,270,214,269,214,269,211,271,207,273,205,275,204,278,203,281,204,282,205,285,206,287,206,289,205,291,204,293,202,294,200,295,197,295,195,295,193,294,192,291,191,288,190,286,189,283,188,280,188,277,187,275,184,275,181,273,179,271,178,268,176,267,173,265,171,261,168,258,168,256,167,254,167,251,165,249,163,248,161,248,158,247,155,244,152,241,152,240,151,237,151,236,152,233,152,230,152,229,150,228,148,228,144,228,140,226,136,224,136,222,135,221,133,220,131,220,128,219,126,216,125,214,125,213,124,212,122,211,121,209,121,207,121,207,120,205,117,202,119,202,121,200,121,197,122,195,122,192,121,189,121,186,121,184,122,182,122,180,122,178,121,176,120,175,119,174,117,170,115,168,114,165,112,162,111,160,109,159,107,157,105,156,104,154,104,152,105,149,107,148,108,146,110,144,111,142,111,141,113,141,115,140,116,139,118,139,121,139,123,141,123,142,123,144,124,145,124,145,125,147,127,147,128,148,131,149,133,149,135,148,137,145,136,141,135,137,135,135,134,132,133,130,132,128,129,127,128,125,127,123,126,121,126,119,127,118,125,118,122,116,121,114,119,111,120,108,120,107,121,104,121,101,122,99,124,99,126,99,129,98,132,97,133,96,136,95,138,94,140,93,142,92,144,92,146,90,149,90,150,92,153,92,155,92,158,92,160,91,161,89,163,88,165,87,167,87,169,87,171,87,174,87,176,87,179,88,180,88,183,87,185,87,187,88,188,90,189,91,189,93,188,94,188,95,190,96,191,94,194,94,195,94,197,94,199,94,200,95,202,95,204,95,205,96,206,96,208,94,209,94,210,93,211,93,214,94,216" /> <area id="xzq3" style="outline: none;" shape="poly" href="tkqy?xzq=3" xzq="3" title="武进区" coords="287,173,290,173,294,174,296,174,297,176,300,177,303,177,306,177,309,178,311,180,311,181,315,181,316,182,318,181,319,180,320,179,322,179,324,178,326,179,328,179,330,179,332,179,332,179,333,177,334,176,336,173,338,171,341,171,344,171,346,171,350,172,353,172,354,174,358,176,358,178,360,180,363,181,365,182,366,180,370,179,373,178,375,178,377,178,378,178,381,180,385,180,389,180,391,182,394,183,397,184,400,185,403,187,406,189,409,191,412,190,413,191,413,195,412,197,413,200,412,203,412,206,412,209,411,212,411,216,411,219,413,220,415,221,417,222,419,222,421,222,423,221,425,220,427,219,429,219,433,217,436,214,438,214,443,214,446,215,448,216,451,216,455,217,458,218,462,219,465,220,467,221,469,223,471,224,473,226,475,227,476,229,475,232,473,232,471,232,471,235,471,237,471,239,469,240,468,242,467,244,465,244,464,246,462,247,461,249,459,250,457,252,455,254,452,256,450,258,449,260,447,262,448,264,448,266,447,268,446,269,444,271,442,272,441,273,441,275,441,276,441,278,442,281,442,281,442,282,443,283,444,284,445,284,446,284,448,285,449,286,451,287,453,289,456,289,458,289,460,292,460,294,460,297,461,298,461,301,461,303,462,305,463,305,463,306,464,307,466,307,466,307,467,307,468,307,470,309,472,310,473,314,471,317,471,319,470,322,469,324,467,326,465,328,466,332,465,335,465,337,462,339,458,340,455,343,453,344,450,346,447,350,444,351,442,355,440,358,439,360,437,363,435,366,434,370,433,373,432,377,432,381,432,385,433,388,435,391,438,392,440,393,444,394,448,396,453,397,456,398,459,399,460,402,460,404,458,407,456,407,453,407,448,407,444,405,438,404,433,401,429,398,428,396,426,394,425,391,424,389,424,386,424,382,425,378,424,374,425,371,426,368,427,364,428,360,429,357,429,354,429,352,431,348,431,344,432,339,433,337,434,334,434,332,434,328,433,325,432,323,432,322,430,320,426,318,422,317,419,317,417,316,414,316,411,316,409,314,406,312,404,309,402,306,401,304,399,300,397,297,393,296,391,295,387,292,385,291,383,289,380,288,378,288,376,289,371,291,366,291,363,291,359,290,356,290,353,290,350,292,347,295,345,298,342,300,340,301,335,301,331,300,327,299,322,296,318,295,314,293,310,292,306,290,303,287,299,286,296,285,293,285,290,283,288,282,285,283,283,285,281,285,279,284,277,281,277,280,276,278,274,277,273,277,271,276,270,273,269,270,269,267,268,265,266,263,264,262,262,260,260,258,259,257,258,255,258,253,259,251,260,250,262,248,263,247,265,245,266,242,266,239,266,236,266,233,267,232,269,230,271,229,272,228,272,227,271,224,271,222,271,219,271,217,272,215,269,212,270,209,271,207,272,205,273,204,275,203,276,203,278,203,280,203,282,205,283,206,285,206,287,206,290,205,291,204,292,203,293,201,293,200,295,197,296,194,293,192,292,190,291,187,290,184,290,182,289,180,288,178,287,176,286,174" /> <area id="xzq4" style="outline: none;" shape="poly" href="tkqy?xzq=4" xzq="4" title="经开区" shape="poly" coords="412,193,412,197,411,202,411,206,411,212,411,218,411,221,416,223,420,223,424,223,427,221,433,220,436,219,438,218,444,218,448,218,453,219,460,222,466,224,471,228,473,228,474,225,473,222,474,219,474,218,479,219,482,220,483,215,484,212,483,209,487,206,489,203,489,195,489,191,489,186,488,183,488,180,490,178,491,178,496,179,500,179,505,179,507,177,506,171,506,169,504,164,500,160,498,157,494,154,492,151,489,149,484,149,482,150,479,150,476,153,472,153,468,154,465,156,462,157,460,156,456,156,454,159,452,161,450,162,446,163,442,164,438,164,433,165,429,165,424,167,420,169,419,170,418,172,417,174,417,176,418,178,419,179,422,182,423,184,425,185,425,188,423,189,419,189,414,191,412,191" /> <area id="