百度地图展示

import React, { useEffect, useState } from 'react';
import { FloatingPanel, List } from 'antd-mobile';
import './App.css'
export default function Index() {
  const [img, setImg] = useState('保定市莲池区南二环河北科技学院皇悦酒店')
  const [tode, setTode] = useState()

  useEffect(() => {
    const map = new window.BMapGL.Map('index-top');
    const point = new window.BMapGL.Point(113.67661912165312,34.75940256033543);
    map.centerAndZoom(point, 12);
    map.enableScrollWheelZoom(true);
    // var label = new window.BMapGL.Label('哈哈哈', {       // 创建文本标注
    //   position: point,                          // 设置标注的地理位置
    //   offset: new window.BMapGL.Size(20, 30)           // 设置标注的偏移量
    // })
    // map.addOverlay(label);
    // 设置地图事件
    map.addEventListener('click', function (e) {
      console.log(e.latlng,'23');
    });


    var myGeo = new window.BMapGL.Geocoder();
    // 将地址解析结果显示在地图上，并调整地图视野
    myGeo.getPoint('保定市莲池区南二环河北科技学院皇悦酒店', function (point) {
      if (point) {
        map.centerAndZoom(point, 16);
        map.addOverlay(new window.BMapGL.Marker(point, { title: '保定市莲池区南二环河北科技学院皇悦酒店' }))
      } else {
        alert('您选择的地址没有解析到结果！');
      }
    }, '河南省')
  }, [])

  const dian = (value) => {
    console.log(value);
    const map = new window.BMapGL.Map('index-top');
    map.enableScrollWheelZoom(true);
    var myGeo = new window.BMapGL.Geocoder(value);
    // 将地址解析结果显示在地图上，并调整地图视野
    myGeo.getPoint(value, function (point) {
      if (point) {
        map.centerAndZoom(point, 16);
        map.addOverlay(new window.BMapGL.Marker(point, { title: value }))
      } else {
        alert('您选择的地址没有解析到结果！');
      }
    }, value)

  }
  const [list, setList] = useState([
    { id: Math.random(), name: '南京' },
    { id: Math.random(), name: '上海' },
    { id: Math.random(), name: '北京' },
    { id: Math.random(), name: '南erg京' },
    { id: Math.random(), name: '南tr京' },
  ])
  const anchors = [100, 260];

  const hh = (value, e) => {
    if (e.keyCode === 13) {
      // console.log(value,67);
      dian(value)
    }
  }
  return (
    <div className='index'>
      <div id="index-top">

      </div>
      <div >
        <FloatingPanel anchors={anchors}>
          <List>
            {list.map(item => {
              return (
                <List.Item key={item.id} onClick={() => {
                  setImg(item.name)
                  dian(item.name)
                }}>{item.name}</List.Item>
              )
            })}
          </List>
        </FloatingPanel>
        <hr />
        <input type="text" value={tode} onKeyDown={(e) => {
          hh(e.target.value, e)
        }} />

      </div>
    </div>
  )
}