問題描述：

　　我一張地圖的圖片，需要做熱點，使用的是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
                  ])
              },
            },
        },
    }
</script>

效果圖：

關於render函式的更多理解

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

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