简单的高德地图实例（带注释）

我们直接上代码：

class Map extends Component {
  componentDidMount() {
    // 创建地图实例
    const map = new window.BMap.Map("container");

    // 设置地图中心点和缩放级别
    const point = new window.BMap.Point(119.612996, 39.940058);
    map.centerAndZoom(point, 17.5);
  
    // 添加地图控件
    map.addControl(new window.BMap.NavigationControl()); // 添加地图平移缩放控件
    map.addControl(new window.BMap.ScaleControl()); // 添加比例尺控件
    map.addControl(new window.BMap.OverviewMapControl()); // 添加缩略图控件
    map.addControl(new window.BMap.MapTypeControl()); // 添加地图类型控件

    // 添加标注
    const marker = new window.BMap.Marker(point); // 创建标注
    map.addOverlay(marker); // 添加标注到地图上

    // 创建覆盖物
    const circle = new window.BMap.Circle(point, 100, {
      strokeColor: "blue", // 边线颜色
      strokeWeight: 2, // 边线宽度
      strokeOpacity: 0.1, // 边线透明度
      fillColor: "blue", // 填充颜色
      fillOpacity: 0.1 // 填充透明度
    });
    map.addOverlay(circle); // 添加覆盖物到地图上
  }

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

export default Map;