react 地图

  <script src="https://api.map.baidu.com/api?v=1.4&services=true&type=webg1&ak=NNr3GC89RHOHwpfZFz37YRQU0IC5ZLVw"></script>


// https://lbsyun.baidu.com/solutions/reactBmapDoc
import React, { useEffect } from 'react';
export default function Index() {

  const handleMap = () => {
    const windowMap: any = window;
    console.log(window);
    const BMapGL = windowMap.BMap;
    var point = new BMapGL.Point(121.96640,29.78013);
    var map = new BMapGL.Map('container'); // 获取地图容器
    map.centerAndZoom(point, 15); // 地图显示的中心坐标点
    map.enableScrollWheelZoom(true, 20); //开启鼠标滚轮缩放
    var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    // 创建点标记
    var marker = new BMapGL.Marker(point);
    map.addOverlay(marker);
    // 创建信息窗口
    var opts: any = {
      enableCloseOnClick: true,
      enableMessage: true,
      width: 200,
      transparency: 0.8,
      position: new BMapGL.Point(point),
      title: '标题',
      text: '快速文本信息窗口'
      //   height: 300
    };
    var infoWindow = new BMapGL.InfoWindow(
      '地址：当前位置',
      opts
    ); // 点标记添加点击事件
    marker.addEventListener('click', function () {
      map.openInfoWindow(infoWindow, point);
    }); // 开启信息窗口})                  // 添加缩放控件
    map.addControl(infoWindow);
    map.openInfoWindow(infoWindow, point);
   // var myCity = new BMapGL.LocalCity();
    // function myFun(result: any) {
    //   var cityName = result.name;
    //   console.log('result', result);

    //   map.setCenter(cityName);
    //   // alert("当前定位城市:" + cityName);
    // }
    // myCity.get(myFun);
    var geolocation = new BMapGL.Geolocation();
    geolocation.getCurrentPosition(function(r:any){
        console.log("hhhh股份回购和国际化家家户户",r);
        
            var mk = new BMapGL.Marker(r?.point);
            map.addOverlay(mk);
            map.panTo(point);
            // alert('您的位置：' + r?.point.lng + ',' + r?.point.lat);
    });
  };
  useEffect(() => {
    handleMap();
  }, []);
  return (
    <div
      style={{ width: '100%', height: '1000px', border: '1px solid red' }}
      id="container"
    ></div>
  );
}