15_微信小程序之svg地图自定义组件编写

微信小程序之svg地图自定义组件编写

之前写过一篇android中实现svg地图的文章，感兴趣的请点击android_打造通用svg地图自定义组件，本文将在小程序中实现一个svg地图自定义组件

一.地图svg数据准备

可以从下面这个网站下载自己需要的svg文件：

http://datav.aliyun.com/tools/atlas/index.html

二.实现思路

和android同理，先准备好json数据，这里不直接使用svg文件是为了方便和后端结合，因为我们往往会希望一个省份的地图里面需要显示哪几个市是后台可控的

{"code": 200,"message": "成功","data": {"cityList": [{"fillAlpha": 1.0,"fillColor": "#a398bf","strokeColor": "#ffffff","strokeWidth": 1,"name": "昆明","cabinId": "530100","pathData": "M601,602L599,606L600,607L598,609L599,610L589,618L588,617L590,616L590,614L577,607L577,611L575,610L574,616L566,617L566,613L561,613L561,608L564,600L560,600L561,592L559,588L559,590L554,593L552,597L553,599L550,601L548,600L549,603L546,609L546,617L543,620L542,619L539,621L537,618L534,619L532,618L533,617L531,615L529,617L527,616L526,618L523,617L521,620L520,618L517,622L517,625L513,625L514,624L507,617L513,611L513,591L511,590L511,588L509,589L510,585L509,583L507,583L505,579L507,576L507,578L509,579L516,578L518,574L518,569L521,565L518,561L517,556L522,555L524,553L525,548L523,541L522,542L518,537L519,533L517,531L519,524L515,522L517,507L511,502L509,498L511,495L517,494L520,490L529,487L530,485L535,487L533,493L538,497L541,496L542,492L548,489L551,485L552,487L558,486L558,477L561,476L562,472L563,473L562,474L566,490L565,493L568,493L570,497L571,496L575,499L574,500L578,507L577,519L579,523L580,521L584,522L583,523L588,521L589,524L594,524L594,527L592,529L593,531L590,536L590,538L594,541L590,543L587,543L587,541L585,542L586,548L582,548L581,552L578,554L576,558L578,559L578,564L576,564L575,567L578,568L577,569L579,570L580,573L580,571L585,572L585,570L589,570L588,572L590,575L585,578L589,584L587,590L592,595L594,592L596,593L596,590L600,591L602,600L601,601z"},{"fillAlpha": 1.0,"fillColor": "#d58dc9","strokeColor": "#ffffff","strokeWidth": 1,"name": "曲靖","cabinId": "530300","pathData": "M583,458L584,457L582,456L585,448L584,446L585,447L587,443L587,441L585,440L597,440L604,436L609,444L608,449L605,450L604,454L605,458L608,458L607,466L611,473L628,474L627,471L631,465L645,467L649,460L653,465L652,467L654,470L660,470L660,474L663,475L664,479L666,480L667,484L663,488L661,488L658,493L656,502L657,504L655,506L652,506L653,511L650,518L651,524L647,530L644,528L643,536L644,539L650,541L651,549L652,547L659,545L658,554L663,557L664,562L668,561L670,564L676,564L676,570L675,571L671,567L667,577L663,578L667,579L669,583L667,583L661,591L654,608L656,616L659,620L657,621L657,623L650,623L650,626L637,628L636,627L638,625L634,621L627,624L624,622L625,616L622,612L623,609L621,607L620,608L611,602L609,602L608,604L605,603L607,599L601,602L602,600L600,591L596,590L596,593L594,592L592,595L587,590L589,584L585,579L590,575L589,570L585,569L585,572L580,571L580,573L579,570L577,569L578,568L575,567L576,564L578,564L577,562L579,559L576,558L578,554L581,552L582,548L586,548L585,542L587,541L587,543L590,543L594,541L590,538L594,524L589,524L589,521L585,523L581,521L579,523L577,519L578,508L574,500L575,499L572,496L571,497L568,493L565,493L566,490L562,474L563,467L566,467L566,465L570,467L572,466L574,459L578,458L580,460L582,458L583,460L584,458z"},{"fillAlpha": 1.0,"fillColor": "#e17987","strokeColor": "#ffffff","strokeWidth": 1,"name": "玉溪","cabinId": "530400","pathData": "M561,651L556,649L549,654L548,650L542,652L539,659L537,660L535,657L536,653L534,651L527,651L526,649L522,650L518,647L513,648L516,650L509,652L511,660L505,662L503,665L506,670L504,671L504,675L509,675L517,687L515,694L508,695L506,693L503,701L488,698L486,700L483,697L478,696L478,694L481,693L479,688L477,688L476,686L477,684L475,684L473,681L476,678L474,676L470,679L467,675L464,675L466,672L465,669L461,670L458,673L456,670L456,665L460,665L464,659L456,650L455,644L452,642L452,639L448,631L453,629L455,624L459,626L459,630L463,638L467,636L472,627L481,633L481,631L483,632L482,636L488,636L494,632L496,627L494,624L495,620L492,621L490,618L489,619L489,615L487,613L491,612L490,609L488,608L491,605L490,603L491,599L495,594L494,592L498,592L502,588L502,586L505,587L505,589L511,588L511,590L513,591L513,611L512,614L508,617L508,619L514,624L514,626L516,625L520,618L521,620L523,617L526,618L527,616L529,617L531,615L533,616L532,618L534,619L537,618L539,621L542,619L543,620L544,618L547,617L545,614L549,603L548,600L550,601L553,599L553,593L559,590L559,588L561,592L560,599L564,600L562,603L561,613L566,613L566,617L563,623L565,625L564,629L565,631L566,630L568,637L564,647L561,650z"},{"fillAlpha": 1.0,"fillColor": "#7edee0","strokeColor": "#ffffff","strokeWidth": 1,"name": "保山","cabinId": "530500","pathData": "M294,537L302,538L301,543L305,542L305,547L307,549L309,549L315,544L322,546L324,550L323,553L320,552L319,557L334,574L336,573L346,579L349,578L348,577L350,576L354,576L356,570L361,568L364,576L367,575L368,579L355,587L357,589L353,593L355,595L353,595L351,598L354,601L353,604L351,604L348,609L346,609L343,612L345,622L343,621L339,628L333,631L331,636L324,636L324,628L321,622L318,622L315,629L307,637L306,636L298,640L295,640L292,644L282,645L281,640L283,639L283,627L281,622L284,619L281,613L276,612L268,615L265,608L263,608L266,606L266,602L264,599L269,596L272,597L273,595L271,590L265,591L258,589L258,586L253,588L252,587L251,582L254,577L249,573L249,565L243,560L243,555L247,554L245,546L249,543L248,538L253,539L257,544L258,542L263,540L263,536L266,534L266,530L271,523L278,526L282,522L284,523L283,527L285,528L284,530L286,534L286,543L293,543L293,538z"},{"fillAlpha": 1.0,"fillColor": "#f58758","strokeColor": "#ffffff","strokeWidth": 1,"name": "昭通","cabinId": "530600","pathData": "M562,472L560,469L558,456L551,443L552,439L550,438L553,429L551,418L555,410L558,413L562,410L564,411L568,409L571,401L574,398L577,399L577,395L582,388L584,388L590,382L591,373L595,368L591,368L590,365L586,363L588,358L594,353L595,350L599,348L604,352L614,345L614,339L609,328L612,324L613,318L615,319L615,321L619,321L619,323L627,321L629,323L631,320L638,320L638,318L643,322L647,319L650,321L650,323L648,323L646,326L639,328L639,337L643,344L645,342L648,343L648,346L652,347L653,349L649,352L649,354L652,355L652,358L649,362L642,364L646,365L648,369L656,376L657,375L660,378L664,378L667,375L678,374L686,365L686,362L691,360L699,363L699,367L705,367L706,370L702,375L705,380L708,380L705,382L707,395L702,400L704,402L699,413L698,410L692,409L679,418L676,414L674,416L671,414L662,417L658,415L655,410L650,408L649,406L646,406L644,407L644,410L640,413L640,417L634,420L631,417L632,416L625,413L624,408L620,409L619,407L614,419L610,420L603,430L599,431L601,435L597,435L599,437L597,440L585,440L587,441L587,443L585,447L584,446L585,448L582,456L584,457L584,459L574,459L570,467L566,465L566,467L563,467L563,473z"},{"fillAlpha": 1.0,"fillColor": "#a398bf","strokeColor": "#ffffff","strokeWidth": 1,"name": "丽江","cabinId": "530700","pathData": "M424,499L421,500L418,497L407,504L407,508L409,511L402,512L399,509L397,510L397,503L396,501L393,501L392,498L394,497L391,490L395,483L397,483L393,477L396,476L394,475L394,473L392,473L392,471L389,471L389,467L387,468L388,466L385,466L385,464L381,465L381,461L378,462L376,467L374,468L371,465L369,465L369,469L362,467L360,465L359,467L354,467L352,465L348,467L346,466L346,464L341,461L337,451L338,450L333,443L333,440L329,436L328,431L330,431L327,427L328,425L326,424L328,423L327,419L330,414L327,408L328,405L332,404L333,400L337,398L339,409L344,414L342,416L356,430L356,433L359,434L363,442L362,446L364,449L369,444L371,436L369,431L370,428L381,417L377,405L381,399L381,396L383,396L382,394L385,391L383,389L385,386L387,387L390,385L392,378L394,376L401,381L405,377L406,373L409,372L412,377L411,380L416,389L420,391L419,395L421,394L420,396L424,402L423,406L425,405L431,414L434,425L441,425L439,438L444,440L444,442L447,443L447,446L450,446L456,451L453,456L455,457L455,459L459,459L459,456L463,457L459,461L461,463L460,468L455,469L460,477L459,478L461,479L460,481L452,485L442,485L441,487L438,487L433,490L425,497z"},{"fillAlpha": 1.0,"fillColor": "#d78cc9","strokeColor": "#ffffff","strokeWidth": 1,"name": "普洱","cabinId": "530800","pathData": "M448,633L452,639L452,642L455,644L456,650L464,659L460,665L456,665L456,670L458,673L460,670L464,669L466,672L464,675L467,675L470,679L474,676L476,678L473,680L475,684L477,684L476,686L477,688L479,688L481,693L478,696L483,697L483,699L487,703L483,706L483,711L487,713L490,713L491,711L499,717L497,718L498,720L495,724L492,724L492,722L486,722L485,728L481,732L487,738L489,736L494,738L498,743L499,747L504,750L512,751L515,755L511,761L512,764L506,763L504,765L502,764L503,763L497,761L493,763L488,763L488,766L485,766L480,758L473,760L472,770L465,770L466,767L464,767L462,763L459,752L452,754L450,756L436,755L432,752L424,757L422,756L421,752L418,752L414,753L412,757L408,757L408,759L406,759L404,762L400,761L392,763L391,770L388,776L382,773L379,773L375,777L372,776L370,782L366,785L365,788L357,788L357,791L350,788L347,791L346,788L343,786L341,787L339,785L338,787L337,785L334,786L332,784L327,786L320,786L315,785L311,782L313,782L312,781L316,776L317,770L319,769L317,767L326,758L324,757L326,753L321,742L326,740L327,736L330,734L330,728L335,731L337,730L334,723L334,716L339,712L341,713L341,710L344,707L348,707L353,710L358,706L368,708L371,706L371,699L373,697L372,695L376,689L378,681L381,681L382,679L389,681L394,677L388,671L388,664L392,659L389,650L391,648L393,649L398,647L398,623L401,620L391,605L392,603L398,601L402,604L406,601L407,595L415,599L417,602L422,602L424,600L435,622L441,629L443,629L446,632z"},{"fillAlpha": 1.0,"fillColor": "#deb586","strokeColor": "#ffffff","strokeWidth": 1,"name": "临沧","cabinId": "530900","pathData": "M392,603L391,605L393,606L401,620L398,623L398,647L393,649L391,648L389,650L392,659L391,662L388,664L388,671L394,677L389,681L384,679L378,681L376,689L372,694L373,697L371,699L371,706L368,708L358,706L353,710L344,706L341,710L342,713L340,712L336,714L334,718L329,718L324,714L322,714L322,716L319,716L318,718L314,716L309,717L304,715L305,712L295,710L294,711L297,705L297,702L293,700L296,699L294,693L295,691L290,691L288,687L291,683L294,682L294,680L291,679L291,676L289,674L290,672L287,669L280,667L282,665L282,657L280,656L289,652L295,646L293,643L295,640L298,640L306,636L307,637L315,629L318,622L321,622L324,628L324,636L328,637L332,635L333,631L339,628L342,621L345,622L343,612L346,609L348,609L348,606L353,604L354,601L351,598L355,595L353,593L357,589L355,587L365,580L367,586L369,586L372,583L379,585L372,606L374,606L374,603L378,601L388,600L390,602z"},{"fillAlpha": 1.0,"fillColor": "#98c48c","strokeColor": "#ffffff","strokeWidth": 1,"name": "楚雄","cabinId": "532300","pathData": "M509,589L505,589L505,587L502,586L499,592L495,592L494,596L491,599L488,608L491,612L487,613L491,621L495,620L494,624L496,626L492,634L485,636L483,636L483,632L481,631L481,633L474,629L473,627L467,636L463,638L461,637L459,627L455,624L453,629L448,633L446,632L443,629L441,629L435,622L432,614L428,607L426,606L426,602L424,602L424,600L422,602L417,602L413,598L413,596L415,596L413,592L414,587L412,584L416,582L414,579L414,572L416,568L418,569L418,563L429,565L427,561L428,559L432,558L432,554L429,553L426,549L427,543L430,543L429,536L427,536L426,533L428,529L426,530L427,528L425,525L423,525L426,521L424,520L427,518L427,515L424,512L426,509L424,507L424,499L429,493L436,488L441,487L442,485L447,486L458,483L461,479L459,478L459,476L462,475L471,483L472,489L468,489L470,495L477,495L482,500L481,503L484,508L489,503L491,505L496,504L500,507L509,498L514,505L517,506L515,522L519,524L517,531L519,533L518,537L522,542L523,541L525,550L520,556L517,556L518,561L521,565L520,568L518,569L518,574L516,578L509,580L507,576L505,579L507,583L510,584L509,587z"},{"fillAlpha": 1.0,"fillColor": "#f58758","strokeColor": "#ffffff","strokeWidth": 1,"name": "红河","cabinId": "532500","pathData": "M566,617L574,617L575,610L577,611L577,607L586,613L590,614L590,616L588,617L589,618L599,610L598,609L600,607L599,606L601,602L607,599L605,603L608,604L609,602L611,602L623,609L621,612L625,616L624,621L622,623L619,623L614,628L608,639L603,639L596,647L596,650L600,654L599,655L602,658L604,658L604,661L601,663L599,671L601,678L598,683L596,683L597,686L601,688L604,685L606,686L606,688L610,689L609,690L611,693L611,700L612,699L617,702L619,706L617,707L617,710L619,713L620,727L617,729L618,735L616,738L616,743L618,745L623,743L625,738L624,736L627,736L631,731L633,733L634,732L634,734L637,732L641,733L641,735L630,737L626,742L624,755L621,758L614,753L608,745L600,738L596,742L596,747L593,752L588,747L586,742L587,741L579,737L577,746L571,748L569,751L569,756L563,759L564,762L554,759L550,753L551,752L543,748L539,744L537,745L533,742L531,744L527,739L524,740L524,742L520,746L521,749L515,755L512,751L504,750L499,747L498,743L494,738L489,736L487,738L481,732L484,730L486,722L492,722L492,724L495,724L498,721L497,718L499,717L492,711L490,713L483,711L483,706L487,703L486,700L488,698L503,701L506,693L508,695L515,694L517,690L515,683L513,682L509,675L504,675L504,671L506,670L503,665L505,662L511,660L512,658L509,653L516,650L513,648L515,647L518,647L522,650L526,649L527,651L534,650L536,653L535,657L537,660L542,652L548,650L549,654L551,654L555,649L561,652L568,638L567,632L564,629L565,625L563,624L565,620z"},{"fillAlpha": 1.0,"fillColor": "#7ddfdd","strokeColor": "#ffffff","strokeWidth": 1,"name": "文山","cabinId": "532600","pathData": "M659,620L660,624L663,624L662,627L669,631L668,624L669,622L671,623L671,621L683,624L691,622L694,624L695,627L697,627L700,630L698,634L703,639L702,642L699,642L699,644L704,649L706,648L706,645L708,645L714,651L719,652L722,645L728,644L729,651L737,648L739,652L743,649L745,650L746,645L752,645L755,647L755,650L758,652L757,653L764,662L764,666L760,668L762,673L759,681L761,684L759,684L759,686L752,692L748,688L740,688L739,691L736,691L735,693L729,696L732,698L732,700L731,701L730,699L725,702L721,707L722,711L716,703L714,704L710,700L708,696L704,701L703,705L693,705L687,710L685,710L684,713L680,712L679,715L675,716L678,728L673,731L670,734L670,736L663,735L663,737L661,734L647,745L644,742L640,742L640,732L637,732L635,734L632,731L629,732L627,736L624,736L625,738L623,743L618,745L616,744L616,736L618,735L617,729L620,723L619,713L617,710L617,707L619,706L617,702L612,699L611,700L610,690L608,688L606,689L605,685L601,688L597,686L596,683L598,683L601,678L599,671L601,664L604,661L604,658L602,658L599,655L600,654L596,650L596,647L600,641L603,639L608,639L614,628L621,622L627,624L634,621L638,625L636,627L641,628L650,626L650,623L657,623L657,621L659,621z"},{"fillAlpha": 1.0,"fillColor": "#98c28e","strokeColor": "#ffffff","strokeWidth": 1,"name": "西双版纳","cabinId": "532800","pathData": "M472,770L469,774L466,774L465,777L469,784L467,785L470,791L469,795L474,797L477,804L480,805L478,812L479,817L483,820L481,823L478,822L478,825L480,827L478,829L477,839L479,843L484,845L484,848L481,848L478,853L475,852L473,849L469,850L469,846L464,845L449,850L444,846L446,843L439,834L442,834L442,830L444,828L443,824L439,824L439,822L441,822L440,816L437,814L438,809L424,815L417,820L413,826L403,831L397,831L394,825L388,826L386,829L381,830L379,827L377,827L376,829L372,822L376,816L373,814L368,816L368,814L364,813L362,803L365,795L363,792L365,785L370,782L371,776L375,777L379,773L388,776L391,770L390,765L392,763L394,764L400,761L404,762L406,759L408,759L408,757L412,757L414,753L421,752L422,756L424,757L432,752L436,755L443,756L450,756L452,754L459,752L463,765L464,767L466,767L465,770L469,770z"},{"fillAlpha": 1.0,"fillColor": "#f78857","strokeColor": "#ffffff","strokeWidth": 1,"name": "大理","cabinId": "532900","pathData": "M294,537L294,530L292,529L293,527L301,531L304,530L302,527L303,524L306,527L310,527L306,514L303,514L301,511L302,503L304,500L308,500L308,502L310,501L314,504L311,500L322,493L322,488L324,489L326,486L329,487L334,481L334,469L341,466L342,463L346,464L346,466L348,467L352,465L354,467L359,467L359,465L369,469L369,465L371,465L373,468L376,467L378,462L381,461L381,465L385,464L385,466L388,466L387,468L389,467L389,471L392,471L392,473L394,473L394,475L396,476L393,477L394,480L397,482L395,483L391,490L394,497L392,498L393,501L396,501L397,503L397,510L409,511L407,508L407,504L418,497L421,500L425,500L424,507L426,508L424,512L425,514L426,513L427,518L424,520L426,521L423,524L427,528L426,530L428,529L426,533L427,536L429,536L430,541L430,543L427,543L426,549L432,554L432,558L429,559L429,564L424,565L419,563L418,569L417,568L414,572L414,579L416,582L412,584L414,587L414,598L407,595L406,601L402,604L398,601L393,603L388,600L384,600L378,601L374,603L374,606L372,606L379,585L372,583L369,586L367,586L365,580L368,579L368,575L364,576L361,569L356,570L354,575L346,579L336,573L334,574L319,557L320,552L323,554L324,550L322,547L315,544L311,546L309,549L307,549L305,547L305,542L301,543L302,538L296,538z"},{"fillAlpha": 1.0,"fillColor": "#e17987","strokeColor": "#ffffff","strokeWidth": 1,"name": "德宏","cabinId": "533100","pathData": "M243,559L244,562L249,565L248,573L254,577L251,582L253,588L257,586L258,589L260,590L270,590L273,595L272,597L269,596L264,599L266,602L266,606L263,607L268,612L267,614L270,615L276,612L281,613L284,619L281,622L283,626L283,639L281,640L282,645L275,648L272,644L258,646L251,645L240,648L233,652L230,652L230,655L226,655L225,657L222,658L222,660L219,661L218,663L216,662L215,664L214,662L206,658L209,656L209,654L213,653L213,650L219,645L221,642L219,640L219,637L222,635L219,632L215,632L215,629L218,628L216,622L207,623L209,613L208,601L209,599L216,595L222,595L224,593L219,589L219,577L224,571L226,563L233,567L241,559z"},{"fillAlpha": 1.0,"fillColor": "#deb586","strokeColor": "#ffffff","strokeWidth": 1,"name": "迪庆","cabinId": "533400","pathData": "M385,386L383,389L385,391L382,394L383,396L381,396L381,399L377,405L381,416L370,428L369,431L371,436L369,444L364,449L362,446L363,442L359,434L356,433L356,430L342,416L344,414L337,403L337,398L333,400L333,403L329,404L327,408L330,414L327,419L328,423L326,424L328,425L327,427L330,431L328,431L329,436L333,442L328,441L326,443L328,444L325,446L320,434L318,434L319,438L315,441L309,439L301,440L302,436L301,437L299,433L299,425L302,418L301,415L297,415L295,411L295,401L293,398L296,394L290,387L293,386L293,384L291,380L288,378L288,365L285,362L281,353L283,350L282,346L285,343L280,332L277,331L277,321L275,318L281,313L279,309L279,299L277,296L282,296L286,293L289,297L290,307L296,308L299,306L299,304L296,302L296,295L302,290L299,284L300,278L303,280L307,277L309,279L308,288L310,297L308,311L310,313L309,316L313,324L312,336L316,341L316,344L320,346L319,348L327,356L326,351L328,345L326,344L329,338L327,334L329,334L327,331L327,327L331,327L331,324L336,321L335,317L340,314L341,307L345,307L347,305L349,313L348,314L365,328L364,330L370,336L369,339L377,343L375,346L378,348L375,352L369,353L367,356L371,364L378,371L376,373L379,376L385,377L385,385z"},{"fillAlpha": 1.0,"fillColor": "#d58dc6","strokeColor": "#ffffff","strokeWidth": 1,"name": "怒江","cabinId": "533300","pathData": "M343,463L341,466L333,470L333,477L335,479L329,487L326,486L324,489L322,488L322,493L311,500L314,503L310,501L308,502L308,500L303,501L301,511L302,514L305,514L307,517L310,527L306,527L303,524L302,527L304,529L301,531L293,527L293,543L286,543L286,534L284,530L285,528L283,527L284,523L282,522L282,519L279,514L276,513L274,503L275,501L279,501L279,505L283,502L283,495L280,494L281,489L284,486L285,471L287,468L285,461L286,454L284,450L284,439L286,438L286,436L284,434L282,424L284,422L284,415L282,413L281,407L282,399L280,397L275,397L273,393L269,394L265,391L264,400L261,403L258,402L256,399L257,397L251,388L253,386L251,385L251,380L248,379L248,376L250,375L249,371L247,371L245,368L247,359L246,356L248,355L248,352L254,349L250,341L252,341L255,338L256,339L261,349L263,359L273,353L277,355L279,352L282,351L282,357L288,365L288,378L291,379L293,384L293,386L290,387L296,394L293,398L295,401L294,404L296,409L296,415L301,415L302,418L299,427L299,433L301,437L302,436L301,440L311,439L315,441L319,438L318,435L320,434L325,446L328,444L326,443L328,441L333,442L337,447L341,461z"}]}
}

那么，接下来要解决的问题就是，怎么把每一个直辖市的数据显示到小程序里，这里你可能会想到用画布去画，如果用画布实现的话，后续处理每一个直辖市的点击事件会显得比较麻烦，因为微信小程序中画布并没有直接提供tap事件，所以就需要开发中自己判断手指触摸事件来实现单击，会显得非常麻烦，而且微信小程序中使用画布会遇到很多兼容性问题(用过的都懂)。

由于微信小程序的image组件是可以直接显示一个svg文件或者一个svg字符串(data:image/svg+xml,<svg>…</svg>)，因此我们可以把上面的json数据中的每一个path转换成一个svg，然后显示到image组件上，这样我们就可以借助image组件的tap事件来处理点击事件了，然而一个svg要保证能正常显示，就必须确定他的width、height和viewBox，因此问题转化为，怎么通过path确定svg的width、height和viewBox?

三.通过svg path确定svg的width、height和viewBox

使用svg-path-bounds，可以通过svg path获取到svg实际显示的左、上、右、下的值，那么svg的width、height、viewBox以及显示位置自然也就能确定了:

width = 右 - 左

height = 下 - 上

viewBox = “左上 width height”

以一个svg path为例，我们让它显示到小程序里:

let path = "M601,602L599,606L600,607L598,609L599,610L589,618L588,617L590,616L590,614L577,607L577,611L575,610L574,616L566,617L566,613L561,613L561,608L564,600L560,600L561,592L559,588L559,590L554,593L552,597L553,599L550,601L548,600L549,603L546,609L546,617L543,620L542,619L539,621L537,618L534,619L532,618L533,617L531,615L529,617L527,616L526,618L523,617L521,620L520,618L517,622L517,625L513,625L514,624L507,617L513,611L513,591L511,590L511,588L509,589L510,585L509,583L507,583L505,579L507,576L507,578L509,579L516,578L518,574L518,569L521,565L518,561L517,556L522,555L524,553L525,548L523,541L522,542L518,537L519,533L517,531L519,524L515,522L517,507L511,502L509,498L511,495L517,494L520,490L529,487L530,485L535,487L533,493L538,497L541,496L542,492L548,489L551,485L552,487L558,486L558,477L561,476L562,472L563,473L562,474L566,490L565,493L568,493L570,497L571,496L575,499L574,500L578,507L577,519L579,523L580,521L584,522L583,523L588,521L589,524L594,524L594,527L592,529L593,531L590,536L590,538L594,541L590,543L587,543L587,541L585,542L586,548L582,548L581,552L578,554L576,558L578,559L578,564L576,564L575,567L578,568L577,569L579,570L580,573L580,571L585,572L585,570L589,570L588,572L590,575L585,578L589,584L587,590L592,595L594,592L596,593L596,590L600,591L602,600L601,601z"

根据path获取bounds

const getBounds = require('./libs/svg-path-bounds')
...
let path = "M601,602L599,606L600,607L598,609L599,610L589,618L588,617L590,616L590,614L577,607L577,611L575,610L574,616L566,617L566,613L561,613L561,608L564,600L560,600L561,592L559,588L559,590L554,593L552,597L553,599L550,601L548,600L549,603L546,609L546,617L543,620L542,619L539,621L537,618L534,619L532,618L533,617L531,615L529,617L527,616L526,618L523,617L521,620L520,618L517,622L517,625L513,625L514,624L507,617L513,611L513,591L511,590L511,588L509,589L510,585L509,583L507,583L505,579L507,576L507,578L509,579L516,578L518,574L518,569L521,565L518,561L517,556L522,555L524,553L525,548L523,541L522,542L518,537L519,533L517,531L519,524L515,522L517,507L511,502L509,498L511,495L517,494L520,490L529,487L530,485L535,487L533,493L538,497L541,496L542,492L548,489L551,485L552,487L558,486L558,477L561,476L562,472L563,473L562,474L566,490L565,493L568,493L570,497L571,496L575,499L574,500L578,507L577,519L579,523L580,521L584,522L583,523L588,521L589,524L594,524L594,527L592,529L593,531L590,536L590,538L594,541L590,543L587,543L587,541L585,542L586,548L582,548L581,552L578,554L576,558L578,559L578,564L576,564L575,567L578,568L577,569L579,570L580,573L580,571L585,572L585,570L589,570L588,572L590,575L585,578L589,584L587,590L592,595L594,592L596,593L596,590L600,591L602,600L601,601z"
let bounds = getBounds(path)//[left, top, right, bottom] = [505, 472, 602, 625]
this.setData({bounds: bounds
})

接下来我们先手动拼出一个svg文件,命名为test.svg,然后放到image标签上显示

<svg xmlns="http://www.w3.org/2000/svg" pointer-events="none" width="96" height="152" viewBox="505 472 96 152"><g><path x="0" class="leaflet-interactive" stroke="#ffffff" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="#000000" fill-opacity="1" fill-rule="evenodd" d="M601,602L599,606L600,607L598,609L599,610L589,618L588,617L590,616L590,614L577,607L577,611L575,610L574,616L566,617L566,613L561,613L561,608L564,600L560,600L561,592L559,588L559,590L554,593L552,597L553,599L550,601L548,600L549,603L546,609L546,617L543,620L542,619L539,621L537,618L534,619L532,618L533,617L531,615L529,617L527,616L526,618L523,617L521,620L520,618L517,622L517,625L513,625L514,624L507,617L513,611L513,591L511,590L511,588L509,589L510,585L509,583L507,583L505,579L507,576L507,578L509,579L516,578L518,574L518,569L521,565L518,561L517,556L522,555L524,553L525,548L523,541L522,542L518,537L519,533L517,531L519,524L515,522L517,507L511,502L509,498L511,495L517,494L520,490L529,487L530,485L535,487L533,493L538,497L541,496L542,492L548,489L551,485L552,487L558,486L558,477L561,476L562,472L563,473L562,474L566,490L565,493L568,493L570,497L571,496L575,499L574,500L578,507L577,519L579,523L580,521L584,522L583,523L588,521L589,524L594,524L594,527L592,529L593,531L590,536L590,538L594,541L590,543L587,543L587,541L585,542L586,548L582,548L581,552L578,554L576,558L578,559L578,564L576,564L575,567L578,568L577,569L579,570L580,573L580,571L585,572L585,570L589,570L588,572L590,575L585,578L589,584L587,590L592,595L594,592L596,593L596,590L600,591L602,600L601,601z"/></g>
</svg>

<view style="width:100%; height:100%"><image src="./images/test.svg" style="position: absolute; left:{{bounds[0]}}rpx; top: {{bounds[1]}}rpx; width:{{bounds[2] - bounds[0]}}rpx; height:{{bounds[3] - bounds[1]}}rpx;"/>
</view>

可以看到svg path结合它自身的bounds生成的svg文件是能正常显示的

四.通过svg path以及它自身的bounds生成svg字符串

为了实现动态控制我们只需要通过svg path以及它自身的bounds生成svg字符串，然后通过image标签显示，直接上代码:

const getBounds = require('./libs/svg-path-bounds')
Component({...lifetimes: {attached: function() {let path = "M601,602L599,606L600,607L598,609L599,610L589,618L588,617L590,616L590,614L577,607L577,611L575,610L574,616L566,617L566,613L561,613L561,608L564,600L560,600L561,592L559,588L559,590L554,593L552,597L553,599L550,601L548,600L549,603L546,609L546,617L543,620L542,619L539,621L537,618L534,619L532,618L533,617L531,615L529,617L527,616L526,618L523,617L521,620L520,618L517,622L517,625L513,625L514,624L507,617L513,611L513,591L511,590L511,588L509,589L510,585L509,583L507,583L505,579L507,576L507,578L509,579L516,578L518,574L518,569L521,565L518,561L517,556L522,555L524,553L525,548L523,541L522,542L518,537L519,533L517,531L519,524L515,522L517,507L511,502L509,498L511,495L517,494L520,490L529,487L530,485L535,487L533,493L538,497L541,496L542,492L548,489L551,485L552,487L558,486L558,477L561,476L562,472L563,473L562,474L566,490L565,493L568,493L570,497L571,496L575,499L574,500L578,507L577,519L579,523L580,521L584,522L583,523L588,521L589,524L594,524L594,527L592,529L593,531L590,536L590,538L594,541L590,543L587,543L587,541L585,542L586,548L582,548L581,552L578,554L576,558L578,559L578,564L576,564L575,567L578,568L577,569L579,570L580,573L580,571L585,572L585,570L589,570L588,572L590,575L585,578L589,584L587,590L592,595L594,592L596,593L596,590L600,591L602,600L601,601z"let bounds = getBounds(path)this.setData({bounds: bounds})let svgStr = this.path2Svg(path, "#ffffff", 1, 1, "#000000")this.setData({svgStr: svgStr})}},/*** 组件的方法列表*/methods: {path2Svg: function(pathData, strokeColor, strokeWidth, fillAlpha, fillColor) {let bounds = getBounds(pathData)let width = bounds[2] - bounds[0]let height = bounds[3] - bounds[1]let svgStr = `<svg xmlns="http://www.w3.org/2000/svg" pointer-events="none" width="${width}" height="${height}" viewBox="${bounds[0]} ${bounds[1]} ${width} ${height}">`svgStr += `<g>`svgStr += `<path stroke="${strokeColor}" stroke-width="${strokeWidth}" fill-opacity="${fillAlpha}" fill="${fillColor}" stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd" d="${pathData}"/>`svgStr += `</g>`svgStr += `</svg>`svgStr = encodeURIComponent(svgStr)svgStr = "data:image/svg+xml," + svgStrreturn svgStr}}
})

<view style="width:100%; height:100%; background: #f2f2f2;"><image src="{{svgStr}}" style="position: absolute; left:{{bounds[0]}}rpx; top: {{bounds[1]}}rpx; width:{{bounds[2] - bounds[0]}}rpx; height:{{bounds[3] - bounds[1]}}rpx;"/>
</view>

显示效果和上图是一样的，如果要显示多个直辖市，那么可以通过for循环去渲染svgStr即可

五.处理点击事件(略)

六.完整代码

var testData = [{"fillAlpha": 1.0,"fillColor": "#a398bf","strokeColor": "#ffffff","strokeWidth": 1,"name": "昆明","cabinId": "530100","pathData": "M601,602L599,606L600,607L598,609L599,610L589,618L588,617L590,616L590,614L577,607L577,611L575,610L574,616L566,617L566,613L561,613L561,608L564,600L560,600L561,592L559,588L559,590L554,593L552,597L553,599L550,601L548,600L549,603L546,609L546,617L543,620L542,619L539,621L537,618L534,619L532,618L533,617L531,615L529,617L527,616L526,618L523,617L521,620L520,618L517,622L517,625L513,625L514,624L507,617L513,611L513,591L511,590L511,588L509,589L510,585L509,583L507,583L505,579L507,576L507,578L509,579L516,578L518,574L518,569L521,565L518,561L517,556L522,555L524,553L525,548L523,541L522,542L518,537L519,533L517,531L519,524L515,522L517,507L511,502L509,498L511,495L517,494L520,490L529,487L530,485L535,487L533,493L538,497L541,496L542,492L548,489L551,485L552,487L558,486L558,477L561,476L562,472L563,473L562,474L566,490L565,493L568,493L570,497L571,496L575,499L574,500L578,507L577,519L579,523L580,521L584,522L583,523L588,521L589,524L594,524L594,527L592,529L593,531L590,536L590,538L594,541L590,543L587,543L587,541L585,542L586,548L582,548L581,552L578,554L576,558L578,559L578,564L576,564L575,567L578,568L577,569L579,570L580,573L580,571L585,572L585,570L589,570L588,572L590,575L585,578L589,584L587,590L592,595L594,592L596,593L596,590L600,591L602,600L601,601z"},{"fillAlpha": 1.0,"fillColor": "#d58dc9","strokeColor": "#ffffff","strokeWidth": 1,"name": "曲靖","cabinId": "530300","pathData": "M583,458L584,457L582,456L585,448L584,446L585,447L587,443L587,441L585,440L597,440L604,436L609,444L608,449L605,450L604,454L605,458L608,458L607,466L611,473L628,474L627,471L631,465L645,467L649,460L653,465L652,467L654,470L660,470L660,474L663,475L664,479L666,480L667,484L663,488L661,488L658,493L656,502L657,504L655,506L652,506L653,511L650,518L651,524L647,530L644,528L643,536L644,539L650,541L651,549L652,547L659,545L658,554L663,557L664,562L668,561L670,564L676,564L676,570L675,571L671,567L667,577L663,578L667,579L669,583L667,583L661,591L654,608L656,616L659,620L657,621L657,623L650,623L650,626L637,628L636,627L638,625L634,621L627,624L624,622L625,616L622,612L623,609L621,607L620,608L611,602L609,602L608,604L605,603L607,599L601,602L602,600L600,591L596,590L596,593L594,592L592,595L587,590L589,584L585,579L590,575L589,570L585,569L585,572L580,571L580,573L579,570L577,569L578,568L575,567L576,564L578,564L577,562L579,559L576,558L578,554L581,552L582,548L586,548L585,542L587,541L587,543L590,543L594,541L590,538L594,524L589,524L589,521L585,523L581,521L579,523L577,519L578,508L574,500L575,499L572,496L571,497L568,493L565,493L566,490L562,474L563,467L566,467L566,465L570,467L572,466L574,459L578,458L580,460L582,458L583,460L584,458z"},{"fillAlpha": 1.0,"fillColor": "#e17987","strokeColor": "#ffffff","strokeWidth": 1,"name": "玉溪","cabinId": "530400","pathData": "M561,651L556,649L549,654L548,650L542,652L539,659L537,660L535,657L536,653L534,651L527,651L526,649L522,650L518,647L513,648L516,650L509,652L511,660L505,662L503,665L506,670L504,671L504,675L509,675L517,687L515,694L508,695L506,693L503,701L488,698L486,700L483,697L478,696L478,694L481,693L479,688L477,688L476,686L477,684L475,684L473,681L476,678L474,676L470,679L467,675L464,675L466,672L465,669L461,670L458,673L456,670L456,665L460,665L464,659L456,650L455,644L452,642L452,639L448,631L453,629L455,624L459,626L459,630L463,638L467,636L472,627L481,633L481,631L483,632L482,636L488,636L494,632L496,627L494,624L495,620L492,621L490,618L489,619L489,615L487,613L491,612L490,609L488,608L491,605L490,603L491,599L495,594L494,592L498,592L502,588L502,586L505,587L505,589L511,588L511,590L513,591L513,611L512,614L508,617L508,619L514,624L514,626L516,625L520,618L521,620L523,617L526,618L527,616L529,617L531,615L533,616L532,618L534,619L537,618L539,621L542,619L543,620L544,618L547,617L545,614L549,603L548,600L550,601L553,599L553,593L559,590L559,588L561,592L560,599L564,600L562,603L561,613L566,613L566,617L563,623L565,625L564,629L565,631L566,630L568,637L564,647L561,650z"},{"fillAlpha": 1.0,"fillColor": "#7edee0","strokeColor": "#ffffff","strokeWidth": 1,"name": "保山","cabinId": "530500","pathData": "M294,537L302,538L301,543L305,542L305,547L307,549L309,549L315,544L322,546L324,550L323,553L320,552L319,557L334,574L336,573L346,579L349,578L348,577L350,576L354,576L356,570L361,568L364,576L367,575L368,579L355,587L357,589L353,593L355,595L353,595L351,598L354,601L353,604L351,604L348,609L346,609L343,612L345,622L343,621L339,628L333,631L331,636L324,636L324,628L321,622L318,622L315,629L307,637L306,636L298,640L295,640L292,644L282,645L281,640L283,639L283,627L281,622L284,619L281,613L276,612L268,615L265,608L263,608L266,606L266,602L264,599L269,596L272,597L273,595L271,590L265,591L258,589L258,586L253,588L252,587L251,582L254,577L249,573L249,565L243,560L243,555L247,554L245,546L249,543L248,538L253,539L257,544L258,542L263,540L263,536L266,534L266,530L271,523L278,526L282,522L284,523L283,527L285,528L284,530L286,534L286,543L293,543L293,538z"},{"fillAlpha": 1.0,"fillColor": "#f58758","strokeColor": "#ffffff","strokeWidth": 1,"name": "昭通","cabinId": "530600","pathData": "M562,472L560,469L558,456L551,443L552,439L550,438L553,429L551,418L555,410L558,413L562,410L564,411L568,409L571,401L574,398L577,399L577,395L582,388L584,388L590,382L591,373L595,368L591,368L590,365L586,363L588,358L594,353L595,350L599,348L604,352L614,345L614,339L609,328L612,324L613,318L615,319L615,321L619,321L619,323L627,321L629,323L631,320L638,320L638,318L643,322L647,319L650,321L650,323L648,323L646,326L639,328L639,337L643,344L645,342L648,343L648,346L652,347L653,349L649,352L649,354L652,355L652,358L649,362L642,364L646,365L648,369L656,376L657,375L660,378L664,378L667,375L678,374L686,365L686,362L691,360L699,363L699,367L705,367L706,370L702,375L705,380L708,380L705,382L707,395L702,400L704,402L699,413L698,410L692,409L679,418L676,414L674,416L671,414L662,417L658,415L655,410L650,408L649,406L646,406L644,407L644,410L640,413L640,417L634,420L631,417L632,416L625,413L624,408L620,409L619,407L614,419L610,420L603,430L599,431L601,435L597,435L599,437L597,440L585,440L587,441L587,443L585,447L584,446L585,448L582,456L584,457L584,459L574,459L570,467L566,465L566,467L563,467L563,473z"},{"fillAlpha": 1.0,"fillColor": "#a398bf","strokeColor": "#ffffff","strokeWidth": 1,"name": "丽江","cabinId": "530700","pathData": "M424,499L421,500L418,497L407,504L407,508L409,511L402,512L399,509L397,510L397,503L396,501L393,501L392,498L394,497L391,490L395,483L397,483L393,477L396,476L394,475L394,473L392,473L392,471L389,471L389,467L387,468L388,466L385,466L385,464L381,465L381,461L378,462L376,467L374,468L371,465L369,465L369,469L362,467L360,465L359,467L354,467L352,465L348,467L346,466L346,464L341,461L337,451L338,450L333,443L333,440L329,436L328,431L330,431L327,427L328,425L326,424L328,423L327,419L330,414L327,408L328,405L332,404L333,400L337,398L339,409L344,414L342,416L356,430L356,433L359,434L363,442L362,446L364,449L369,444L371,436L369,431L370,428L381,417L377,405L381,399L381,396L383,396L382,394L385,391L383,389L385,386L387,387L390,385L392,378L394,376L401,381L405,377L406,373L409,372L412,377L411,380L416,389L420,391L419,395L421,394L420,396L424,402L423,406L425,405L431,414L434,425L441,425L439,438L444,440L444,442L447,443L447,446L450,446L456,451L453,456L455,457L455,459L459,459L459,456L463,457L459,461L461,463L460,468L455,469L460,477L459,478L461,479L460,481L452,485L442,485L441,487L438,487L433,490L425,497z"},{"fillAlpha": 1.0,"fillColor": "#d78cc9","strokeColor": "#ffffff","strokeWidth": 1,"name": "普洱","cabinId": "530800","pathData": "M448,633L452,639L452,642L455,644L456,650L464,659L460,665L456,665L456,670L458,673L460,670L464,669L466,672L464,675L467,675L470,679L474,676L476,678L473,680L475,684L477,684L476,686L477,688L479,688L481,693L478,696L483,697L483,699L487,703L483,706L483,711L487,713L490,713L491,711L499,717L497,718L498,720L495,724L492,724L492,722L486,722L485,728L481,732L487,738L489,736L494,738L498,743L499,747L504,750L512,751L515,755L511,761L512,764L506,763L504,765L502,764L503,763L497,761L493,763L488,763L488,766L485,766L480,758L473,760L472,770L465,770L466,767L464,767L462,763L459,752L452,754L450,756L436,755L432,752L424,757L422,756L421,752L418,752L414,753L412,757L408,757L408,759L406,759L404,762L400,761L392,763L391,770L388,776L382,773L379,773L375,777L372,776L370,782L366,785L365,788L357,788L357,791L350,788L347,791L346,788L343,786L341,787L339,785L338,787L337,785L334,786L332,784L327,786L320,786L315,785L311,782L313,782L312,781L316,776L317,770L319,769L317,767L326,758L324,757L326,753L321,742L326,740L327,736L330,734L330,728L335,731L337,730L334,723L334,716L339,712L341,713L341,710L344,707L348,707L353,710L358,706L368,708L371,706L371,699L373,697L372,695L376,689L378,681L381,681L382,679L389,681L394,677L388,671L388,664L392,659L389,650L391,648L393,649L398,647L398,623L401,620L391,605L392,603L398,601L402,604L406,601L407,595L415,599L417,602L422,602L424,600L435,622L441,629L443,629L446,632z"},{"fillAlpha": 1.0,"fillColor": "#deb586","strokeColor": "#ffffff","strokeWidth": 1,"name": "临沧","cabinId": "530900","pathData": "M392,603L391,605L393,606L401,620L398,623L398,647L393,649L391,648L389,650L392,659L391,662L388,664L388,671L394,677L389,681L384,679L378,681L376,689L372,694L373,697L371,699L371,706L368,708L358,706L353,710L344,706L341,710L342,713L340,712L336,714L334,718L329,718L324,714L322,714L322,716L319,716L318,718L314,716L309,717L304,715L305,712L295,710L294,711L297,705L297,702L293,700L296,699L294,693L295,691L290,691L288,687L291,683L294,682L294,680L291,679L291,676L289,674L290,672L287,669L280,667L282,665L282,657L280,656L289,652L295,646L293,643L295,640L298,640L306,636L307,637L315,629L318,622L321,622L324,628L324,636L328,637L332,635L333,631L339,628L342,621L345,622L343,612L346,609L348,609L348,606L353,604L354,601L351,598L355,595L353,593L357,589L355,587L365,580L367,586L369,586L372,583L379,585L372,606L374,606L374,603L378,601L388,600L390,602z"},{"fillAlpha": 1.0,"fillColor": "#98c48c","strokeColor": "#ffffff","strokeWidth": 1,"name": "楚雄","cabinId": "532300","pathData": "M509,589L505,589L505,587L502,586L499,592L495,592L494,596L491,599L488,608L491,612L487,613L491,621L495,620L494,624L496,626L492,634L485,636L483,636L483,632L481,631L481,633L474,629L473,627L467,636L463,638L461,637L459,627L455,624L453,629L448,633L446,632L443,629L441,629L435,622L432,614L428,607L426,606L426,602L424,602L424,600L422,602L417,602L413,598L413,596L415,596L413,592L414,587L412,584L416,582L414,579L414,572L416,568L418,569L418,563L429,565L427,561L428,559L432,558L432,554L429,553L426,549L427,543L430,543L429,536L427,536L426,533L428,529L426,530L427,528L425,525L423,525L426,521L424,520L427,518L427,515L424,512L426,509L424,507L424,499L429,493L436,488L441,487L442,485L447,486L458,483L461,479L459,478L459,476L462,475L471,483L472,489L468,489L470,495L477,495L482,500L481,503L484,508L489,503L491,505L496,504L500,507L509,498L514,505L517,506L515,522L519,524L517,531L519,533L518,537L522,542L523,541L525,550L520,556L517,556L518,561L521,565L520,568L518,569L518,574L516,578L509,580L507,576L505,579L507,583L510,584L509,587z"},{"fillAlpha": 1.0,"fillColor": "#f58758","strokeColor": "#ffffff","strokeWidth": 1,"name": "红河","cabinId": "532500","pathData": "M566,617L574,617L575,610L577,611L577,607L586,613L590,614L590,616L588,617L589,618L599,610L598,609L600,607L599,606L601,602L607,599L605,603L608,604L609,602L611,602L623,609L621,612L625,616L624,621L622,623L619,623L614,628L608,639L603,639L596,647L596,650L600,654L599,655L602,658L604,658L604,661L601,663L599,671L601,678L598,683L596,683L597,686L601,688L604,685L606,686L606,688L610,689L609,690L611,693L611,700L612,699L617,702L619,706L617,707L617,710L619,713L620,727L617,729L618,735L616,738L616,743L618,745L623,743L625,738L624,736L627,736L631,731L633,733L634,732L634,734L637,732L641,733L641,735L630,737L626,742L624,755L621,758L614,753L608,745L600,738L596,742L596,747L593,752L588,747L586,742L587,741L579,737L577,746L571,748L569,751L569,756L563,759L564,762L554,759L550,753L551,752L543,748L539,744L537,745L533,742L531,744L527,739L524,740L524,742L520,746L521,749L515,755L512,751L504,750L499,747L498,743L494,738L489,736L487,738L481,732L484,730L486,722L492,722L492,724L495,724L498,721L497,718L499,717L492,711L490,713L483,711L483,706L487,703L486,700L488,698L503,701L506,693L508,695L515,694L517,690L515,683L513,682L509,675L504,675L504,671L506,670L503,665L505,662L511,660L512,658L509,653L516,650L513,648L515,647L518,647L522,650L526,649L527,651L534,650L536,653L535,657L537,660L542,652L548,650L549,654L551,654L555,649L561,652L568,638L567,632L564,629L565,625L563,624L565,620z"},{"fillAlpha": 1.0,"fillColor": "#7ddfdd","strokeColor": "#ffffff","strokeWidth": 1,"name": "文山","cabinId": "532600","pathData": "M659,620L660,624L663,624L662,627L669,631L668,624L669,622L671,623L671,621L683,624L691,622L694,624L695,627L697,627L700,630L698,634L703,639L702,642L699,642L699,644L704,649L706,648L706,645L708,645L714,651L719,652L722,645L728,644L729,651L737,648L739,652L743,649L745,650L746,645L752,645L755,647L755,650L758,652L757,653L764,662L764,666L760,668L762,673L759,681L761,684L759,684L759,686L752,692L748,688L740,688L739,691L736,691L735,693L729,696L732,698L732,700L731,701L730,699L725,702L721,707L722,711L716,703L714,704L710,700L708,696L704,701L703,705L693,705L687,710L685,710L684,713L680,712L679,715L675,716L678,728L673,731L670,734L670,736L663,735L663,737L661,734L647,745L644,742L640,742L640,732L637,732L635,734L632,731L629,732L627,736L624,736L625,738L623,743L618,745L616,744L616,736L618,735L617,729L620,723L619,713L617,710L617,707L619,706L617,702L612,699L611,700L610,690L608,688L606,689L605,685L601,688L597,686L596,683L598,683L601,678L599,671L601,664L604,661L604,658L602,658L599,655L600,654L596,650L596,647L600,641L603,639L608,639L614,628L621,622L627,624L634,621L638,625L636,627L641,628L650,626L650,623L657,623L657,621L659,621z"},{"fillAlpha": 1.0,"fillColor": "#98c28e","strokeColor": "#ffffff","strokeWidth": 1,"name": "西双版纳","cabinId": "532800","pathData": "M472,770L469,774L466,774L465,777L469,784L467,785L470,791L469,795L474,797L477,804L480,805L478,812L479,817L483,820L481,823L478,822L478,825L480,827L478,829L477,839L479,843L484,845L484,848L481,848L478,853L475,852L473,849L469,850L469,846L464,845L449,850L444,846L446,843L439,834L442,834L442,830L444,828L443,824L439,824L439,822L441,822L440,816L437,814L438,809L424,815L417,820L413,826L403,831L397,831L394,825L388,826L386,829L381,830L379,827L377,827L376,829L372,822L376,816L373,814L368,816L368,814L364,813L362,803L365,795L363,792L365,785L370,782L371,776L375,777L379,773L388,776L391,770L390,765L392,763L394,764L400,761L404,762L406,759L408,759L408,757L412,757L414,753L421,752L422,756L424,757L432,752L436,755L443,756L450,756L452,754L459,752L463,765L464,767L466,767L465,770L469,770z"},{"fillAlpha": 1.0,"fillColor": "#f78857","strokeColor": "#ffffff","strokeWidth": 1,"name": "大理","cabinId": "532900","pathData": "M294,537L294,530L292,529L293,527L301,531L304,530L302,527L303,524L306,527L310,527L306,514L303,514L301,511L302,503L304,500L308,500L308,502L310,501L314,504L311,500L322,493L322,488L324,489L326,486L329,487L334,481L334,469L341,466L342,463L346,464L346,466L348,467L352,465L354,467L359,467L359,465L369,469L369,465L371,465L373,468L376,467L378,462L381,461L381,465L385,464L385,466L388,466L387,468L389,467L389,471L392,471L392,473L394,473L394,475L396,476L393,477L394,480L397,482L395,483L391,490L394,497L392,498L393,501L396,501L397,503L397,510L409,511L407,508L407,504L418,497L421,500L425,500L424,507L426,508L424,512L425,514L426,513L427,518L424,520L426,521L423,524L427,528L426,530L428,529L426,533L427,536L429,536L430,541L430,543L427,543L426,549L432,554L432,558L429,559L429,564L424,565L419,563L418,569L417,568L414,572L414,579L416,582L412,584L414,587L414,598L407,595L406,601L402,604L398,601L393,603L388,600L384,600L378,601L374,603L374,606L372,606L379,585L372,583L369,586L367,586L365,580L368,579L368,575L364,576L361,569L356,570L354,575L346,579L336,573L334,574L319,557L320,552L323,554L324,550L322,547L315,544L311,546L309,549L307,549L305,547L305,542L301,543L302,538L296,538z"},{"fillAlpha": 1.0,"fillColor": "#e17987","strokeColor": "#ffffff","strokeWidth": 1,"name": "德宏","cabinId": "533100","pathData": "M243,559L244,562L249,565L248,573L254,577L251,582L253,588L257,586L258,589L260,590L270,590L273,595L272,597L269,596L264,599L266,602L266,606L263,607L268,612L267,614L270,615L276,612L281,613L284,619L281,622L283,626L283,639L281,640L282,645L275,648L272,644L258,646L251,645L240,648L233,652L230,652L230,655L226,655L225,657L222,658L222,660L219,661L218,663L216,662L215,664L214,662L206,658L209,656L209,654L213,653L213,650L219,645L221,642L219,640L219,637L222,635L219,632L215,632L215,629L218,628L216,622L207,623L209,613L208,601L209,599L216,595L222,595L224,593L219,589L219,577L224,571L226,563L233,567L241,559z"},{"fillAlpha": 1.0,"fillColor": "#deb586","strokeColor": "#ffffff","strokeWidth": 1,"name": "迪庆","cabinId": "533400","pathData": "M385,386L383,389L385,391L382,394L383,396L381,396L381,399L377,405L381,416L370,428L369,431L371,436L369,444L364,449L362,446L363,442L359,434L356,433L356,430L342,416L344,414L337,403L337,398L333,400L333,403L329,404L327,408L330,414L327,419L328,423L326,424L328,425L327,427L330,431L328,431L329,436L333,442L328,441L326,443L328,444L325,446L320,434L318,434L319,438L315,441L309,439L301,440L302,436L301,437L299,433L299,425L302,418L301,415L297,415L295,411L295,401L293,398L296,394L290,387L293,386L293,384L291,380L288,378L288,365L285,362L281,353L283,350L282,346L285,343L280,332L277,331L277,321L275,318L281,313L279,309L279,299L277,296L282,296L286,293L289,297L290,307L296,308L299,306L299,304L296,302L296,295L302,290L299,284L300,278L303,280L307,277L309,279L308,288L310,297L308,311L310,313L309,316L313,324L312,336L316,341L316,344L320,346L319,348L327,356L326,351L328,345L326,344L329,338L327,334L329,334L327,331L327,327L331,327L331,324L336,321L335,317L340,314L341,307L345,307L347,305L349,313L348,314L365,328L364,330L370,336L369,339L377,343L375,346L378,348L375,352L369,353L367,356L371,364L378,371L376,373L379,376L385,377L385,385z"},{"fillAlpha": 1.0,"fillColor": "#d58dc6","strokeColor": "#ffffff","strokeWidth": 1,"name": "怒江","cabinId": "533300","pathData": "M343,463L341,466L333,470L333,477L335,479L329,487L326,486L324,489L322,488L322,493L311,500L314,503L310,501L308,502L308,500L303,501L301,511L302,514L305,514L307,517L310,527L306,527L303,524L302,527L304,529L301,531L293,527L293,543L286,543L286,534L284,530L285,528L283,527L284,523L282,522L282,519L279,514L276,513L274,503L275,501L279,501L279,505L283,502L283,495L280,494L281,489L284,486L285,471L287,468L285,461L286,454L284,450L284,439L286,438L286,436L284,434L282,424L284,422L284,415L282,413L281,407L282,399L280,397L275,397L273,393L269,394L265,391L264,400L261,403L258,402L256,399L257,397L251,388L253,386L251,385L251,380L248,379L248,376L250,375L249,371L247,371L245,368L247,359L246,356L248,355L248,352L254,349L250,341L252,341L255,338L256,339L261,349L263,359L273,353L277,355L279,352L282,351L282,357L288,365L288,378L291,379L293,384L293,386L290,387L296,394L293,398L295,401L294,404L296,409L296,415L301,415L302,418L299,427L299,433L301,437L302,436L301,440L311,439L315,441L319,438L318,435L320,434L325,446L328,444L326,443L328,441L333,442L337,447L341,461z"}
]module.exports = testData

// components/svg-map/index.js
const getBounds = require('./libs/svg-path-bounds')
const testData = require('./test-data')
Component({...lifetimes: {attached: function() {for(let i=0; i<testData.length; i++) {testData[i].bounds = getBounds(testData[i].pathData)testData[i].svgStr = this.path2Svg(testData[i].pathData, testData[i].strokeColor, testData[i].strokeWidth, testData[i].fillAlpha, testData[i].fillColor)}this.setData({svgList: testData})}},/*** 组件的方法列表*/methods: {path2Svg: function(pathData, strokeColor, strokeWidth, fillAlpha, fillColor) {let bounds = getBounds(pathData)let width = bounds[2] - bounds[0]let height = bounds[3] - bounds[1]let svgStr = `<svg xmlns="http://www.w3.org/2000/svg" pointer-events="none" width="${width}" height="${height}" viewBox="${bounds[0]} ${bounds[1]} ${width} ${height}">`svgStr += `<g>`svgStr += `<path stroke="${strokeColor}" stroke-width="${strokeWidth}" fill-opacity="${fillAlpha}" fill="${fillColor}" stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd" d="${pathData}"/>`svgStr += `</g>`svgStr += `</svg>`svgStr = encodeURIComponent(svgStr)svgStr = "data:image/svg+xml," + svgStrreturn svgStr}}
})

<!--components/svg-map/index.wxml-->
<view style="width:100%; height:100%; background: #f2f2f2;"><image wx:for="{{svgList}}" src="{{item.svgStr}}" style="position: absolute; left:{{item.bounds[0]}}rpx; top: {{item.bounds[1]}}rpx; width:{{item.bounds[2] - item.bounds[0]}}rpx; height:{{item.bounds[3] - item.bounds[1]}}rpx;"/>
</view>

至于怎么让整个地图居中显示就不在这里写了,css样式大家都会