react+百度地图生成覆盖物和信息弹窗

最新推荐文章于 2024-08-10 07:56:54 发布

何良语

最新推荐文章于 2024-08-10 07:56:54 发布

阅读量2.4k

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/sinat_39626276/article/details/80541480

版权

本文介绍如何在React应用中结合百度地图API来生成地图上的覆盖物并实现信息弹窗。通过组件化的方式，利用生命周期方法确保在接收到地图实例后创建覆盖物。同时，展示了如何修改弹窗样式以达到预期的显示效果。

摘要由CSDN通过智能技术生成

创建组件之前要先定义BMap和BMapLib：

const BMap = window.BMap;
const BMapLib = window.BMapLib;

首先，可以将地图作为props传入到组件中，因为渲染时间问题，有可能在接收到map之前就进行了渲染，所以要在组件的生命周期内接收这个参数，并且调用创建覆盖物的方法：

componentWillReceiveProps(nextProps) {
    if (nextProps) {
      this.showMarker(mapdata, nextProps.map);
    }
  }

以下是创建覆盖物的方法：

  showMarker(data, map) {
    // const { map } = this.props;
    map.clearOverlays();
    const len = data.length;

    if (data.length) {
      for (let i = 0; i < len; i++) {
        const item = data[i];
        let myicon = '/resource/images/icon/sensing_icon_home.png';
        switch (item.type) {
          case 'home': myicon = '/resource/images/icon/sensing_icon_home.png'; break;
          case 'ba