[JavaScript知识库]腾讯地图-new qq.maps.place.Autocomplete在弹框中不显示的问题

近期做了这么一个需求：需要在弹框搜索和选取地图定位，然后我发现，使用new qq.maps.place.Autocomplete“不显示”下拉选项的问题

如图：

刚开始我以为是没有请求到数据，然后看了network，发现是有数据返回的

再后来我发现 其实下拉选项是有渲染的

最终找到原因是：下拉选项的元素的z-index要低于弹框的zindex，于是把下拉选项的z-index设置的弹框的z-index大就可以了

最终效果为：

最后附上代码

/* eslint-disable */
import React, { useEffect, useState } from 'react';
import qs from 'querystring';
import {
  Input, Row, Col, Button,
} from 'dpl-react';
import history from '@/history';
import { toCorp } from '@/utils/url';
import PropTypes from 'prop-types';
// import { getCorpPath } from '@/constant/url';

import './index.scss';

const MapComponent = (props) => {
  const { confirm, params } = props
  const { address, lng, height = '100%' } = params
  const [currentPositionText, setCurrentPositionText] = useState(address);
  const [currentPositionLng, setCurrentPositionLng] = useState(lng);
  const toInitMap = () => {
    const geo = new window.qq.maps.Geocoder();
    let map = '';
    let marker = '';
    let jqqGeocoder = '';
    function createMap(pos) {
      map = new window.qq.maps.Map(document.getElementById('container'), {
        center: pos, // 将经纬度加到center属性上
        zoom: 16, // 缩放
        draggable: true, // 是否可拖拽
        scrollwheel: true, // 是否可滚动缩放
        disableDoubleClickZoom: false,
      });
    }
    function createMarker(pos) {
      marker = new window.qq.maps.Marker({
        position: pos, // 标记的经纬度
        map, // 标记的地图
      });
    }
    function triggerGeocoder(center) {
      if (jqqGeocoder) {
        // 逆向解析地址
        jqqGeocoder.getAddress(center);
      }
    }

    // setCurrentPositionText(currentPositionText);
    geo.getLocation(address); // 地址
    geo.setComplete((res) => {
      console.log(res, res.detail.location); // 得到经纬度
      createMap(res.detail.location);
      createMarker(res.detail.location);
      window.qq.maps.event.addListener(map, 'click', (event) => {
        if (marker) {
          marker.setPosition(event.latLng);
          setCurrentPositionLng(event.latLng);
          jqqGeocoder = new window.qq.maps.Geocoder({
            complete: (result) => {
              setCurrentPositionText(result.detail.address);
            },
            error: () => {
              console.log('111', 111)
              alert("出错了，请输入正确的地址！！！");
            }
          });
          triggerGeocoder(event.latLng);
        }
      });
    });
    geo.setError(function() {
      console.log('222', 222)
      alert("出错了，请输入正确的地址！！！");
    });

    // 实例化自动完成
    let keyword = '';
    const ap = new window.qq.maps.place.Autocomplete(document.getElementById('place'), {
      offset: new window.qq.maps.Size(0, 5),
      location: currentPositionText,
      zIndex: 2000,
    });
    const searchService = new window.qq.maps.SearchService({
      complete: (results) => {
        if (results.type === 'CITY_LIST') {
          searchService.setLocation(results.detail.cities[0].cityName);
          searchService.search(keyword);
          return;
        }
        const { pois } = results.detail;
        const latlngBounds = new window.qq.maps.LatLngBounds();
        for (let i = 0, l = pois.length; i < l; i += 1) {
          if (i > 0) break;
          const poi = pois[i];
          latlngBounds.extend(poi.latLng);
          if (marker) {
            marker.setPosition(poi.latLng);
          }
          marker.setTitle(poi.name);
          setCurrentPositionLng(poi.latLng);
          setCurrentPositionText(poi.address || keyword);
        }
        map.fitBounds(latlngBounds);
      },
      error: () => {
        console.log('333', 333)
        alert("出错了，请输入正确的地址！！！");
      }
    });
    // 添加监听事件
    window.qq.maps.event.addListener(ap, 'confirm', (res) => {
      keyword = res.value;
      searchService.search(keyword);
    });
  };
  useEffect(() => {
    toInitMap();
  }, []);
  useEffect(() => {
    if (currentPositionText && currentPositionLng) {
      confirm({
        address: currentPositionText,
        lng: currentPositionLng
      })
    }
  }, [currentPositionText])
  return (
    <div className="map-component" style={{height}}>
      <div id="container" />
      <div className="search-box">
        <Input placeholder="输入地址,自动完成" type="text" id="place" style={{ width: '300px' }} />
        <Row>
          <Col span={6}>当前定位：</Col>
          <Col span={18}>{currentPositionText}</Col>
        </Row>
      </div>
    </div>
  );
}

MapComponent.defaultProps = {
  params: '',
  confirm: () => {}
};

MapComponent.propTypes = {
  params: PropTypes.object.isRequired,
  confirm: PropTypes.func.isRequired
};

export default MapComponent