vue使用高德地图关键字搜索功能的实例代码(踩坑经验)

目录

一、如何在Vue中引入基础高德地图

步骤一：注册并登录高德地图开发平台，申请密钥​编辑

   步骤二：安装高德地图加载器

二、 项目效果图

三、完整项目代码 

1、子组件 position.vue（看这个）

 2.在父组件引入position.vue

四、总结-------项目避坑（踩坑）

1、第一个坑：因为我用的element-ui的dialog组件，vue 页面或者弹窗使用 高德地图组件 map组件 不能加载 。

 2、第2个坑 搜索的时候 关键字列表出不来

3、补充知识点：Z-index属性详解

---

一、如何在Vue中引入基础高德地图

根据官网提示，在Web端，我们需要高德地图加载器：npm i @amap/amap-jsapi-loader -S

• 步骤一：注册并登录高德地图开发平台，申请密钥

 

•    步骤二：安装高德地图加载器

npm  i  @amap/amap-jsapi-loader -S

二、 项目效果图

三、完整项目代码 

1、子组件 position.vue（看这个）

 2.在父组件引入position.vue

父组件引入一小部分，这里不影响效果，核心部分在position.vue

        
          选择打卡位置
          
             {{rowData.address  }}
          

            打卡活动经度:
            {{
              rowData.longitude ? rowData.longitude : "选择好位置后自动获取"
            }}
          
          

            打卡活动纬度:
            {{
              rowData.latitude ? rowData.latitude : "选择好位置后自动获取"
            }}
          

          
          
        

四、总结-------项目避坑（踩坑）

我摸索了很久，很不容易,才解决这2个坑

1、第一个坑：因为我用的element-ui的dialog组件，vue 页面或者弹窗使用 高德地图组件 map组件 不能加载 。

我遇到的问题是：

高德地图在页面中引用能够正常显示（在其他页面没有使用el-dialog组件），但是想在el-dialog中显示高德地图并进行操作，地图无法显示。

为什么呢？因为是当我点击添加活动列表时，打开了第一层弹框的组件，这个时候第二层的弹框组件还没有打开，但是确已经加载了地图，所以我们不能在mounted里面初始化地图

2层组件

1、主要原因是当前生命周期mounted执行完成后，第2个组件页面el-dialog元素并不存在，所有无法显示地图。

解决方案：先确保拿到数据，再加载地图，我在这里使用watch监听，原理就是当第2个el-dialog组件为true的时候才加载地图

  watch:{
    // 监听事件 如果打开了弹框才加载地图，否则不加载地图
    //positionDialog是控制弹框是否显示的值
    positionDialog(type){
      if(type){
        //type： True or false
        this.initMap(); 
      }
    }
  },

 2、第2个坑 搜索的时候 关键字列表出不来

了解到是由于层级的原因

解决方案：

高德地图搜索框没有效果的原因可能是因为搜索的结果在地图的图层底下，所以不显示，疯狂在本页面进行css穿透改各种样式，结果还是不生效，没办法那就在全局样式中加了一段这里记录一下css样式级别: 行内>内部>外部，全局>页面而这次在全局里写样式是因为我这段高德地图是引入第三方的东西，它的css可能不在我的本页面内存放或者级别高于我本页面的样式，所以在本页面穿透解决不了它，在全局可以解决有一个要注意的是，级别越高，影响越大，例如在本项目的其它地方使用到class='amap-sug-result’时，它都会添加以下样式了，所以在能实现的基础上，级别越低越好

//然后我就在主页面，也就是我的App.vue人口文件加了这个，效果就出来了
.amap-sug-result{
  z-index: 9999!important;
}

3、补充知识点：Z-index属性详解

1.概念

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

 案例：

	
		
		
		
	
	
		
					   
		
A
		
B
		
C
	

以上就是我踩坑总结出来的，该项目的代码可以直接复制，我踩的坑已经补上去了 ，如果有不明白的或者一些错误，希望大家指出来，大家一起探讨！