弹出层再接弹出层poi搜索下拉框不显示

[lliyuu520]

使用版本

请填写使用版本： "@vuemap/vue-amap": "^2.1.2", "@amap/amap-jsapi-loader": "^1.0.1", "vue": "3.2.37",

问题描述

因为业务需要,需要在弹出层的弹出层绘制地图,poi搜索能调用接口获取数据,但下拉框无法渲染

代码:

    <div class="amap-container">
                    <el-amap ref="mapRef" :zoom="zoom" :center="center" @click="getClickLocation">
            <el-amap-search-box class="amap-sug-result" :debounce="1000" @select="selectPoi" @choose="choosePoi" >
            </el-amap-search-box>
                        <el-amap-control-tool-bar />
                        <el-amap-control-scale />
                        <el-amap-control-geolocation :need-address="true" :convert="true" @complete="getLocation" />
                        <el-amap-marker :position="center" />
                    </el-amap>
                </div>

<style lang="scss" scoped>
.amap-container {
    height: 400px;
}
.amap-sug-result {
    z-index: 2000;
}
</style>

[yangyanggu]

你这修改amap-sug-result 放在scoped里面了，没有生效

[lliyuu520]

谢谢,已解决

[yyt231]

<template>
  <el-dialog :append-to-body="true" v-model="dialogVisible" fullscreen>
    <div class="map-page-container"
         style="height: 650px">

      <el-amap
          :center="center"
          :zoom="zoom"
      >

        <el-amap-elastic-marker
            :position="componentMarker.position"
            title="标号"
            :visible="componentMarker.visible"
            :draggable="componentMarker.draggable"
            :zoom-style-mapping="componentMarker.zoomStyleMapping"
            :styles="componentMarker.styles"
            @init="markerInit"
            @click="clickMarker"
        />

        <el-amap-search-box
            :debounce="500"
            @select="selectPoi"
            @choose="choosePoi"
        />
      </el-amap>

    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {ElAmap, ElAmapElasticMarker, ElAmapSearchBox} from "@vuemap/vue-amap";

const zoom = ref(16);
const center = ref([116.412866, 39.88365]);
let dialogVisible = ref(false)

const componentMarker = ref({
  position: [116.412866, 39.88365],
  visible: true,
  draggable: true,
  zoomStyleMapping: {
    14: 0,
    15: 0,
    16: 1,
    17: 1,
    18: 1,
    19: 1,
    20: 1
  },
  styles: [{
    icon: {
      img: 'https://a.amap.com/jsapi_demos/static/resource/img/故宫.png',
      size: [16, 16],//可见区域的大小
      anchor: 'bottom-center',//锚点
      fitZoom: 14,//最合适的级别
      scaleFactor: 2,//地图放大一级的缩放比例系数
      maxScale: 2,//最大放大比例
      minScale: 1//最小放大比例
    },
    label: {
      content: '祈年殿',
      position: 'BM',
      minZoom: 1
    }
  }, {
    icon: {
      img: 'https://a.amap.com/jsapi_demos/static/resource/img/qiniandian.png',
      size: [128, 160],
      anchor: 'bottom-center',
      fitZoom: 17.5,
      scaleFactor: 2,
      maxScale: 2,
      minScale: 0.125
    },
    label: {
      content: '祈年殿',
      position: 'BM',
      minZoom: 1
    }
  }],
});

const clickMap = (e: any) => {
  console.log('click map: ', e);
}
const initMap = (map: any) => {
  console.log('init map: ', map);
}

const clickMarker = () => {
  alert('点击了标号');
}

const markerInit = (e) => {
  console.log('marker init: ', e);
}

const selectPoi = (e: any) => {
  center.value = [e.poi.location.lng, e.poi.location.lat]
  componentMarker.value.position = [e.poi.location.lng, e.poi.location.lat]
}
const choosePoi = (e: any) => {
  center.value = [e.poi.location.lng, e.poi.location.lat]
  componentMarker.value.position = [e.poi.location.lng, e.poi.location.lat]
}

// 打开弹窗
const openDialog = (id: string, contractId: '') => {
  dialogVisible.value = true

};

// 暴露变量
defineExpose({
  openDialog
});
</script>

<style lang="scss">
.amap-sug-result {
  z-index: 2000;
}
</style>

我这样写也没生效，是为啥了

[yangyanggu]

不生效有两种情况，一种是因为返回结果层级不够被盖住了，就是你现在的修改方式，还有一种是没有配置安全密钥，导致无法获取返回结果，你得先在devtools里看下这个请求返回的结果是不是存在，如果存在，再看下修改的层级是否生效了