一、如何在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（看这个）

<template><div><el-dialog:close-on-click-modal="false"title="选取打卡地址":visible="positionDialog":before-close="closePositionDialog"@close="closePositionDialog"append-to-bodywidth="800px"><div class="content"><div class="search-box"><div class="label">关键字搜索</div><el-inputv-model="input"placeholder="请输入内容"id="tipinput"></el-input></div><div ref="map" id="map-container"></div></div><span slot="footer"><el-button @click="closePositionDialog" size="medium">取消</el-button><el-button type="primary" @click="handlePositionDialog" size="medium">确定</el-button></span></el-dialog></div>
</template><script>
import AMapLoader from "@amap/amap-jsapi-loader";window._AMapSecurityConfig = {// 设置安全密钥securityJsCode: "496a363743c16d929a5ce1cae458e40c",
};export default {props: {positionDialog: {type: Boolean,default: false,},},data() {return {input: "",map: null,lnglat: [], //   [longitude,latitude]auto: null,placeSearch: null,markers: [],position: {}, //传给父组件的值【放经纬度和地址】};},watch: {// 监听事件 如果打开了弹框才加载地图，否则不加载地图positionDialog(type) {if (type) {//type True or falsethis.initMap();}},},methods: {async initMap() {await this.$nextTick();console.log(this.$refs.map);AMapLoader.load({key: "03d75b4d03793d2ff355aa3d492118c2", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Geocoder"],}).then((AMap) => {console.log(AMap);this.map = new AMap.Map("map-container", {// 设置地图容器idviewMode: "3D", //  是否为3D地图模式zoom: 18, // 初始化地图级别center: [113.435871, 23.163298], //中心点坐标resizeEnable: true,});// 关键字查询this.searchMap();// 监听鼠标点击事件this.map.on("click", this.clickMapHandler);}).catch((e) => {console.log(e);});},// 点击地图事件获取经纬度，并添加标记clickMapHandler(e) {this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];this.setMarker(this.lnglat);console.log(e, "点击地图", this.lnglat);// 点击地图上的位置，根据经纬度转换成详细地址let geocoder = new AMap.Geocoder({});let that = this;geocoder.getAddress(this.lnglat, function (status, result) {console.log(status, result);if (status === "complete" && result.regeocode) {console.log(result.regeocode);that.address = result.regeocode.formattedAddress;} else {console.log("查询地址失败，请稍后再试");}});this.position = {longitude: e.lnglat.getLng(),latitude: e.lnglat.getLat(),address: that.address,};this.input=that.address //把查询到的地址赋值到输入框},// 关键字查询searchMap() {// 搜索框自动完成类this.auto = new AMap.AutoComplete({input: "tipinput", // 使用联想输入的input的id});//构造地点查询类this.placeSearch = new AMap.PlaceSearch({map: this.map,});// 当选中某条搜索记录时触发this.auto.on("select", this.selectSite);console.log(this.selectSite, "select");},//当选中某条搜索记录时触发selectSite(e) {console.log("经纬度", e.poi.location.lng, e.poi.location.lat, e.poi.name);this.lnglat = [e.poi.location.lng, e.poi.location.lat];this.placeSearch.setCity(e.poi.adcode);this.placeSearch.search(e.poi.name); //关键字查询this.position = {longitude: e.poi.location.lng,latitude: e.poi.location.lat,address: e.poi.name,};// this.$emit('selPosition',this.position)},//  添加标记setMarker(lnglat) {this.removeMarker();console.log("位置", lnglat);let marker = new AMap.Marker({position: lnglat,});marker.setMap(this.map);this.markers.push(marker);},// 删除之前后的标记点removeMarker() {if (this.markers) {this.map.remove(this.markers);}},closePositionDialog() {this.input = "";this.position={}this.$emit("update:positionDialog", false);},handlePositionDialog() {this.$emit("selPosition", this.position); //把选择的位置传给父组件this.closePositionDialog();},},
};
</script><style lang="scss" >
.search-box {display: flex;justify-content: flex-start;align-items: center;height: 50px;.label {width: 100px;}
}
.content {position: relative;
}
#panel {position: absolute;top: 50px;right: 20px;
}
#map-container {overflow: hidden;width: 100%;height: 700px;margin: 0;
}
.amap-sug-result {z-index: 2999 !important;
}
</style>

2.在父组件引入position.vue

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

        <el-form-item label="打卡位置" prop="address"><el-button size="mini" type="info":disabled="dialogType == 'detail'"@click="positionDialog = true">选择打卡位置</el-button><el-tag type="success" v-if="rowData.address"  >{{rowData.address  }}</el-tag><div>打卡活动经度:<el-tag type="danger" effect="plain" >{{rowData.longitude ? rowData.longitude : "选择好位置后自动获取"}}</el-tag></div><div>打卡活动纬度:<el-tag type="danger" effect="plain">{{rowData.latitude ? rowData.latitude : "选择好位置后自动获取"}}</el-tag></div><!-- 对话框【打卡位置选择】 --><position :positionDialog.sync="positionDialog"@selPosition="(position)=>{rowData.latitude=position.latituderowData.longitude=position.longituderowData.address=position.address}"/></el-form-item>

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

我摸索了很久，很不容易,才解决这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 falsethis.initMap(); }}},

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

了解到是由于层级的原因

解决方案：

.amap-sug-result{z-index: 2999!important;
}

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

1.概念

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

案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>z-index Demo</title><style type="text/css">div{width: 200px;height: 200px;text-align: center;font-size: 50px;line-height: 200px;position: absolute;}#red{left: 100px;top: 100px;}#green{left: 200px;top: 200px;}</style></head><body><!-- Z-index层叠性原则：1.同层级元素(或position:static)默认情况下文档流后面的元素会覆盖前面的。（后来居上）2. 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。 --><div id="red" style="background: red;z-index: 0;">A</div><div id="green" style="background-color: green;">B</div><div id="blue" style="background-color: blue;z-index: -1;">C</div></body>
</html>

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

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

vue使用高德地图的搜索地址和拖拽选址
1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --save 2.vue中引入,用到所搜提示组件和拖拽选址,本人的经历是2.0版本是个傻逼垃圾坑,用默认的版本 ...
vue集成高德地图后搜索按钮国际化的问题
这里就不详细介绍 vue如何集成高德地图了, 如有问题请参考:https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install 咱先说下 ...
高德地图嵌入到threejs全景中的踩坑指南
项目中用到了THREE.OrbitControls, 还要内嵌HTML结构(高德地图), 我这边采用的是THREE.CSS3DObject. 这导致了一个问题--由于OrbitControls必须将事 ...
vue项目使用高德地图的定位及关键字搜索功能
1.首先在index.html引入高德地图的秘钥.如图: 注意:如果使用关键字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch,否则功能无法使用,并会 ...
利用高德地图关键字检索POI-实现仿微信发朋友圈搜索附近位置
转载请注明出处:http://blog.csdn.net/Alpha58/article/details/57079874 前言由于项目中需要实现搜索附近位置作为收获地址,所以采用了高德地图的关键字 ...
vue使用高德地图原生API实现省份添加背景色，文字标注；实现点聚合和点标记点击之后出现信息窗体的功能
功能描述:初始状态下,可以看到所有数据在地图上的分布的省份及相应的分布数量,点击点标注可以弹出对应的详细信息. 该例子使用了高德地图原生API去实现上述功能,效果图如下: 下面附上实现步骤: 1. v ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
Android学习之高德地图的通用功能开发步骤（二）
周一又来了,我就接着上次的开发步骤(一)来吧,继续把高德地图的相关简单功能分享一下上次写到了第六步,接着写第七步吧. 第七步:定位 + 地图选点 + 路径规划 + 实时导航以下是我的这个功能Nav ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...

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

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

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

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

二、项目效果图

三、完整项目代码

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

2.在父组件引入position.vue

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

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

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

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

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

最新文章

热门文章

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

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

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

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

二、 项目效果图

三、完整项目代码

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

2.在父组件引入position.vue

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

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

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

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

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

最新文章

热门文章

二、项目效果图

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

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