uniapp vue2 app端，图片热区点击没有效果应该怎么解决？

目前是实现了在h5中的热区点击功能，但是运行在app端点击就没有反应，console.log("地区x")语句都没有打印出来。
查了很多其他人的提问，有人说用render.js，去研究了下发现搞不太懂。
请教大佬们这应该怎么解决啊？

部分代码如下：

<template>  
       <img src="static/pt.png" style="width: 600rpx; border:0;" mode="widthFix" usemap="#planetmap" />  
    <mapelement></mapelement>  
</template>  
<script>  
   export default {  
      data() {  
     return {  }  
      },  
      components: {  
            'mapelement': {  
                render: function(createElement) {  
                    var pElem1 = createElement('area', {  
                        attrs: {  
                            shape: "poly",  
                            coords: "55,54,51,67,44,72,51,78,34,111,10,143,15,171,8,190,12,201,20,202,42,240,35,258,45,260,47,277,68,279,93,277,114,273,114,279,104,292,112,299,131,295,119,330,129,356,175,332,210,319,241,295,236,284,235,274,223,268,217,259,209,252,214,237,208,220,213,200,198,194,196,182,204,182,203,165,213,146,208,133,212,117,230,114,239,127,257,127,253,111,253,103,253,89,240,92,239,81,221,79,213,55,216,38,195,28,172,46,149,56,149,43,137,50,114,36,91,37",  
                            href: "#",  
                        },  
                        on: {  
                            click: (e) => {  
                                console.log("地区一");   
                                uni.$emit("targetEvent", {  
                                    id: 4  
                                })  
                            },  
                        }  
                    });  
                    var pElem2 = createElement('area', {  
                        attrs: {  
                            shape: "poly",  
                            coords: "252,108,259,126,243,130,234,115,216,120,209,135,217,151,199,185,202,198,212,197,212,250,223,267,240,273,240,292,251,291,274,288,292,282,308,293,317,274,306,263,304,254,294,251,291,243,279,246,277,235,284,228,289,211,303,206,295,201,302,178,295,162,275,154,285,141,267,136,271,120,275,114,261,106",  
                            href: "#",  
                        },  
                        on: {  
                            click: function() {  
                                console.log("地区二");  
                                uni.$emit("targetEvent", {  
                                    id: 0  
                                })  
                            },  
                        }  
                    });  
                    var pElem3 = createElement('area', {  
                        attrs: {  
                            shape: "poly",  
                            coords: "213,36,226,40,250,23,266,4,268,32,328,8,372,16,360,32,366,42,370,55,362,80,375,103,398,127,413,122,418,143,406,166,402,176,369,193,362,210,356,214,350,201,334,203,336,196,326,191,325,154,314,143,319,125,304,124,295,133,285,130,284,138,274,135,273,122,277,115,262,109,255,108,254,92,239,94,240,83,218,75,213,53",  
                            href: "#",  
                        },  
                        on: {  
                            click: function() {  
                                console.log("地区三");  
                                uni.$emit("targetEvent", {  
                                    id: 1  
                                })  
                            },  
                        }  
                    });  
                    var pElem4 = createElement('area', {  
                        attrs: {  
                            shape: "poly",  
                            coords: "308,123,299,133,285,132,282,147,280,154,305,176,298,201,307,202,299,216,279,234,281,247,309,257,322,241,338,242,356,255,383,277,411,276,416,269,405,238,392,240,379,239,377,227,359,221,356,212,352,198,334,201,323,189,327,161,313,142,319,127",  
                            href: "#",  
                        },  
                        on: {  
                            click: function() {  
                                console.log("地区四");  
                                uni.$emit("targetEvent", {  
                                    id: 2  
                                })  
                            },  
                        }  
                    });  
                    var pElem5 = createElement('area', {  
                        attrs: {  
                            shape: "poly",  
                            coords: "323,238,313,252,308,261,319,274,310,292,297,300,291,291,278,314,292,324,332,308,324,357,303,337,303,352,316,379,343,389,354,434,368,416,375,390,377,360,351,344,347,333,361,310,368,323,383,343,411,340,437,347,449,338,450,314,469,309,488,298,464,277,444,255,430,262,409,281,386,276,341,243",  
                            href: "#",  
                        },  
                        on: {  
                            click: function() {  
                                console.log("地区五");  
                                uni.$emit("targetEvent", {  
                                    id: 3  
                                })  
                            },  
                        }  
                    });  
                    return createElement('map', {  
                            attrs: {  
                                name: "planetmap",  
                                id: "planetmap"  
                            }  
                        },  
                        [  
                            pElem1, pElem2, pElem3, pElem4, pElem5  
                        ])  
                },  
            },  
         }，  
        onLoad(e) {  
        uni.$on("targetEvent", (e) => {  
            var id = JSON.parse(e.id)  
            this.getId(id)  
        })  
        uni.$on("hj", (e) => {  
            var zid = JSON.parse(e.zid)  
            this.sanCity(zid)  
        })  
        },  
    methods: {  
             ......  
        }  
</script>