componentDidMount内部的地图

import React, { Component } from 'react';

class MapComponent extends Component {
  componentDidMount() {
    // 引入腾讯地图API
    const script = document.createElement('script');
    script.src = 'https://map.qq.com/api/js?v=2.exp&key=YOUR_API_KEY';
    script.async = true;
    script.onload = () => {
      // 创建地图实例
      const map = new window.qq.maps.Map(document.getElementById('map'), {
        center: new window.qq.maps.LatLng(39.916527, 116.397128), // 地图中心点坐标
        zoom: 13, // 缩放级别
        disableDefaultUI: true, // 禁用默认控件
      });

      // 添加标记
      new window.qq.maps.Marker({
        position: new window.qq.maps.LatLng(39.916527, 116.397128),
        map,
      });

      // 绘制路线
      const path = [
        new window.qq.maps.LatLng(39.916527, 116.397128),
        new window.qq.maps.LatLng(39.908749, 116.397128),
      ];
      new window.qq.maps.Polyline({
        path,
        map,
      });

      // 监听地图事件
      window.qq.maps.event.addListener(map, 'click', (event) => {
        console.log('Clicked at', event.latLng);
      });
    };

    document.body.appendChild(script);
  }

  render() {
    return <div id="map" style={{ width: '100%', height: '400px' }}></div>;
  }
}

export default MapComponent;