vue一个页面如何显示多个地图？

Question

为了方便，我把地图封装成一个组件，这是父级代码

<position :DOM="`map${index}`"></position> //传过去的map1,map2,map3以此类推

子组件代码：

<template>
    <div>
        <div :id="DOM" class="container"></div>
    </div>
</template>
let map = "";
let posi = [116.397428, 39.90923];
let DOM = "";
let loadMap = function(){
    //加载地图
    let params = {
        zoom: 14,
        center:posi
    }
    map = new AMap.Map(DOM, params);
    //标记
    var marker = new AMap.Marker({
        position:posi  //位置
    });
    map.add(marker);
}
window.map_callback = () => {
    loadMap()
}
export default {
    props:["DOM"],
    data(){
        return {
            key:'',
        }
    },
    watch:{
        DOM:function(){
            DOM = this.DOM;
            this.initAmap();
        }
    },
    methods: {
        //初始化地图
        initAmap(){
            var scriptUrl = `https://webapi.amap.com/maps?v=1.4.13&key=${this.key}&callback=map_callback`
            var scriptID = 'map_amp_ID'
            if(window.scriptID){
                window.map_callback()
                console.log('已加载成功')
                return
            }
            var script = document.createElement('script')
            script.id = scriptID
            script.src = scriptUrl

            var amapUIJs = document.createElement('script')
            //amapUIJs.src = 'https://webapi.amap.com/ui/1.0/main-async.js'

            document.body.appendChild(script)
            document.body.appendChild(amapUIJs)
        },
    },
    created(){
        this.key = AMAPKEY; //地图key值
        DOM = this.DOM; //父组件传过来的唯一值
        console.log("this.DOM:" + this.DOM);
        console.log("DOM:" + DOM);
    },
    mounted(){
        this.initAmap();
    },
}
</script>

浏览器也没报错，为啥就显示一个地图呀？

Answer 1

是不是因为id重复了

Answer 2

js 开始部分缺少 <script> (PS:这应该是贴代码不小心导致的

你可以将export default 上方的js代码全部放入vue内 加载多个也许会影响 而且代码写在上面太乱了.