React百度地图添加自定义点，自定义地图报错

首先添加默认点，先配置两个静态点的经纬度，这里我用的静态数据

 state={
    pointlist:[
      {lng:"114.52208184",
        lat:"38.04895831"},
        {lng:"114.62208112",
          lat:"38.04895831"}
    ]
  }

添加按钮

<button onClick={this.addpoint}>添加默认样式点</button>

添加方法

addpoint=()=>{
    var BMap = window.BMap;
    rBmap.centerAndZoom("石家庄", 11);  // 设置中心点
    //rBmap.centerAndZoom(new BMap.Point(114.52208184,38.04895831), 11);  // 设置中心点
    var list=this.state.pointlist
    list.map((item)=>{
      var markers = new BMap.Marker(new BMap.Point(item.lng, item.lat)); //lng为经度,lat为纬度
      rBmap.addOverlay(markers);//将标签添加到地图中去
    })
  }

这样默认地图点就加好了，需要注意的是，添加点以后地图不会自己跳到点的位置，可以手动配置一下。

添加自己设置图片的点
首先添加要配置的图片，react引入图片的方式

import greenicon from "../assets/img/location-green.png"

添加按钮

 <button onClick={this.addIconPoint}>添加自定义样式点</button>

添加方法

addIconPoint=()=>{
    rBmap.clearOverlays();//清除页面所有的点
    var BMap = window.BMap;
    rBmap.centerAndZoom("石家庄", 11);  // 设置中心点
    var list=this.state.pointlist
    list.map((item)=>{
      var icons =greenicon; //这个是你要显示坐标的图片的相对路径
      var markers = new BMap.Marker(new BMap.Point(item.lng, item.lat)); //lng为经度,lat为纬度
      var icon = new BMap.Icon(icons, new BMap.Size(55, 55)); //显示图标大小
      markers.setIcon(icon);//设置标签的图标为自定义图标
      // var icon = markers.getIcon();
      //  markers.setShadow(icon);//去掉阴影
      rBmap.addOverlay(markers);//将标签添加到地图中去
    })
  }

这里需要注意的，图片一定不能太大，不然就显示不出来了，这样就获取了自定义图片的点。效果如下

然后咱们来自定义一下地图样式，我用的是3.0的版本，就这个版本直接先去百度官网定制样式，地址是
http://lbs.baidu.com/index.php?title=jspopular3.0/guide/custom

定制完成后，会给一个id

在我们的地图初始化的时候配置一下，一定要在初始化完了之后引入，代码如下

componentDidMount(){//要在组件完成后初始化地图
    var BMap = window.BMap;//新键地图，用全局window
    var map = new BMap.Map("allmap",{ enableMapClick: false }); // 创建Map实例，这边我禁用了鼠标点击事件，可以不设置
    
    rBmap=map;//map实例赋值给全局的一个变量
    map.centerAndZoom(new BMap.Point(114.52208184,38.04895831), 11); // 设置中心点
    map.enableScrollWheelZoom(true);//设置可以根据鼠标滚动
    map.setMapStyleV2({     //添加自定义样式，放到初始化最后
      styleId: '30f0c609203a6e029264a7a6a2e39c02'
    });
  }

这里面有个坑，就是如果你设置中心的时候写城市名的话，就会报错，我换成经纬度就没事儿了。
全部代码如下

import React, { Component } from 'react';
import greenicon from "../assets/img/location-green.png"

var rBmap ={} // 全局Map实例
class maphost extends Component{
  state={
    pointlist:[
      {lng:"114.52208184",
        lat:"38.04895831"},
        {lng:"114.62208112",
          lat:"38.04895831"}
    ]
  }

  componentDidMount(){//要在组件完成后初始化地图
    var BMap = window.BMap;//新键地图，用全局window
    var map = new BMap.Map("allmap",{ enableMapClick: false }); // 创建Map实例，这边我禁用了鼠标点击事件，可以不设置
    
    rBmap=map;//map实例赋值给全局的一个变量
    map.centerAndZoom(new BMap.Point(114.52208184,38.04895831), 11); // 设置中心点
    map.enableScrollWheelZoom(true);//设置可以根据鼠标滚动
    map.setMapStyleV2({     //添加自定义样式，放到初始化最后
      styleId: '30f0c609203a6e029264a7a6a2e39c02'
    });
  }
  addpoint=()=>{
    var BMap = window.BMap;
    rBmap.centerAndZoom("石家庄", 11);  // 设置中心点
    var list=this.state.pointlist
    list.map((item)=>{
      var markers = new BMap.Marker(new BMap.Point(item.lng, item.lat)); //lng为经度,lat为纬度
      rBmap.addOverlay(markers);//将标签添加到地图中去
    })
  }
  addIconPoint=()=>{
    rBmap.clearOverlays();//清除页面所有的点
    var BMap = window.BMap;
    rBmap.centerAndZoom("石家庄", 11);  // 设置中心点
    var list=this.state.pointlist
    list.map((item)=>{
      var icons =greenicon; //这个是你要显示坐标的图片的相对路径
      var markers = new BMap.Marker(new BMap.Point(item.lng, item.lat)); //lng为经度,lat为纬度
      var icon = new BMap.Icon(icons, new BMap.Size(55, 55)); //显示图标大小
      markers.setIcon(icon);//设置标签的图标为自定义图标
      // var icon = markers.getIcon();
      //  markers.setShadow(icon);//去掉阴影
      rBmap.addOverlay(markers);//将标签添加到地图中去
    })
  }
  render(){
  
    return (
        <div style={{height:'calc(100vh - 80px)'}}>
          <button onClick={this.addpoint}>添加默认样式点</button>
          <button onClick={this.addIconPoint}>添加自定义样式点</button>
          <div  id='allmap' style={{ width:'100%',height:'100%' }}></div>
        </div>
    );
  }
  
  
}

export default maphost;

效果