定义了一个地图组件,同一个页面引用多次时只显示了其中一个组件有数据,其他组件数据未渲染出来,怎么回事??

问题背景:我使用的是腾讯地图;根据需要封装了一个如下的地图组件qqMap

图1:定义一个div元素,id固定为container

定义了一个地图组件,同一个页面引用多次时只显示了其中一个组件有数据,其他组件数据未渲染出来,怎么回事??

图2:初始化这个id=container的元素,作为地图

定义了一个地图组件,同一个页面引用多次时只显示了其中一个组件有数据,其他组件数据未渲染出来,怎么回事??

图三:我又定义了一个组件叫electronicTable,在这个组件里,我引入了上边定义的qqMap组件

定义了一个地图组件,同一个页面引用多次时只显示了其中一个组件有数据,其他组件数据未渲染出来,怎么回事??

图四:在touristQuery组件里我分别引入了
	 electronicTable(electronicTable内部引入了qqMap) 和qqMap;
	 此时这个页面内部就相当于引入了两次qqMap

定义了一个地图组件,同一个页面引用多次时只显示了其中一个组件有数据,其他组件数据未渲染出来,怎么回事??
问题描述: 根据上述,这个时候虽然引入了两个qqMap,但是按理说每次是单独调用,不应该有什么问题,但是此时去调用的时候,会发现touristQuery下直接引用的qqMap有数据;但是electronicTable内部引用的qqMap为空,查询出了数据但是没有渲染;

问题原因: 因为qqMap初始化的时候,要初始化两次,但是每次id都是container,第二次初始化的时候,发现这个id=container已经初始化过了,此时这个页面里已经存在了名为container的地图了,就不会再去初始化了(此处可能不对,小伙伴可以留言指正)

解决方法: 将图一的id设置成动态的,不同地方调用的给与不同的id值,如图:

图五:touristQuery直接引用的qqMap加一个属性divId=container; 
     (divId是自定义属性名,可自定义;container是自定义id值,可自定义)

定义了一个地图组件,同一个页面引用多次时只显示了其中一个组件有数据,其他组件数据未渲染出来,怎么回事??

图六:electronicTable引用的qqMap加一个属性divId=container1; 
     (divId是自定义属性名,可自定义;container1是自定义id值,可自定义)

定义了一个地图组件,同一个页面引用多次时只显示了其中一个组件有数据,其他组件数据未渲染出来,怎么回事??

图七:qqMap接收传回来的divId值,动态绑定在元素上

定义了一个地图组件,同一个页面引用多次时只显示了其中一个组件有数据,其他组件数据未渲染出来,怎么回事??

图八:qqMap在初始化地图时,通过这个动态的divId值去查找元素即可

定义了一个地图组件,同一个页面引用多次时只显示了其中一个组件有数据,其他组件数据未渲染出来,怎么回事??

结论: 这个就是我本次遇到的问题一个解决过程了,上述的问题原因可能不是很正确,写的急,就没有去细究了,小伙伴看到如果有需要指正的地方,希望不吝赐教哈,谢谢~下班啦