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

空&白

已于 2022-05-02 15:39:10 修改

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端

于 2022-02-22 11:00:52 首次发布

本文链接：https://blog.youkuaiyun.com/qq_32707555/article/details/123063459

vue 专栏收录该内容

61 篇文章

订阅专栏

本文介绍了在Vue项目中使用高德地图web端JSAPI时遇到的组件id冲突问题，导致地图无法正常显示和操作。通过为不同组件设置不同的container和inputId，成功解决了组件间地图显示和功能失效的状况。详细步骤包括在组件a和b中分别给高德地图组件分配不同的id，从而确保每个组件都能独立使用和操作地图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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'
		}
	},
}