vue高德地图(amap-jsapi-loader)页面与组件使用(地图JS API)

vue使用高德地图web端JS API（amap-jsapi-loader）：https://lbs.amap.com/api/jsapi-v2/guide/abc/load/
我用的是这种方法：

页面a，组件b，高德地图组件c。
a页面里面使用组件c，直接触发组件c的函数有效。组件b为页面a的某一个模块，并且组件b也使用组件c，那么，在组件b中触发组件c的地图点击、搜索无效，并且地图显示不出来。
页面a使用高德正常

组件b使用高德无数据

发现问题：因为同一高德组件的id一样。
container：容器id一样的话，组件b显示地图则恐空白，显示不出来。
tipinput：输入框的id，展示输入后的搜索结果。

解决办法：
在使用组件的时候，给一个不同的id。
a页面

<GaodeMap ref="gaodeMap" @mapOk="mapOk"></GaodeMap>

b组件

<GaodeMap ref="gaodeMap" @mapOk="mapOk" container="containerCopy" inputId="keyInputCopy"></GaodeMap>

高德组件c

<div class="ra">
 <div :id="container" class="container"></div>
  <div :class="inputId">
    <a-input :id="inputId" placeholder="请输入关键字" ref="fou"/>
  </div>
</div>
export default{
	props:{
		container:{
			type:String,
			default:'container'
		},
		inputId:{
			type:String,
			default:'keyInput'
		}
	},
}

大概这样。其他的就不多补充了。