解決map熱點與uni-app中map標簽沖突的問題。（Vue Render函數應用）

問題描述：

　　我一張地圖的圖片，需要做熱點，使用的是map-area標簽。但當我在uni-app中使用時，卻與uni-app中的map標簽沖突，map標簽自動變成了uni-map標簽。

<img src="/static/img/map.png" usemap="#planetmap">
<map name="planetmap" id="planetmap">
    <area shape="rect" coords="25,14,165,80" href="#">
</map>

解決方法：

使用Vue的render函數。創建虛擬dom。

完整代碼：

<template  id="first">
    <view class="content">
        <img src="../../static/pic/map.png" border="0" usemap="#planetmap" />
        <mapelement></mapelement>
    </view>
</template>
<script>
    export default {
        data() {
            return {
            }
        },
        components:{
            'mapelement': {
              render: function(createElement) {
                var pElem1 = createElement('area', {
                    attrs:{
                        shape: "rect",
                        coords: "25,14,165,80",
                        href:"#",
                    },
                    on: {
                        click: function() {
                            console.log("hello");
                        },
                    }
                });
                return createElement('map',  {attrs: {
                    name: "planetmap",
                    id: "planetmap"
                  }},[
                      pElem1   //想要添加更多area,可在數組中繼續添加。如[pElem1,pElem2,…]
                  ])
              },
            },
        },
    }
</script>

效果圖：

關於render函數的更多理解

參考：https://cn.vuejs.org/v2/guide/render-function.html

https://www.cnblogs.com/tugenhua0707/p/7528621.html