项目首页需要引入百度地图，根据需要点击地图上的标记点显示弹框，并且根据数据显示标记点的样式，下面附上代码：
//初始化地图componentDidMount() {this.initMap(filterData);}initMap = (data, level = 5, num1 = 116.413369, num2 = 39.910836) => {const { BMap, BMAP_STATUS_SUCCESS } = window;let points = data;let map = new BMap.Map("allmap"); // 创建Map实例map.centerAndZoom(new BMap.Point(num1, num2), level);let top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });// 左上角，添加比例尺let top_left_navigation = new BMap.NavigationControl();let top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT,type: BMAP_NAVIGATION_CONTROL_SMALL});if (level !== 5) {let geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function (r) {if (this.getStatus() === BMAP_STATUS_SUCCESS) {map.panTo(r.point);}}, { enableHighAccuracy: true })}map.addControl(top_left_control);map.addControl(top_left_navigation);// map.addControl(top_right_navigation);map.enableScrollWheelZoom(true);this.addMarker(map, points, 'init', false);};//循环建立标注点addMarker = (map, points, key = undefined, iconFlag, check = undefined) => {if (!!key && key === 'query') {let allOverlay = map.getOverlays();allOverlay.forEach(i => {map.removeOverlay(i);})}// 这边是根据业务来处理数据 自行修改for (let i = 0, pointsLen = points.length; i < pointsLen; i++) {let s = [];if (points[i].coordinate) {s = points[i].coordinate} else {for (let k = 0; k < CITYPOSITION.length; k++) {if (points[i].area) {if (CITYPOSITION[k].name == points[i].area) {s = `(${CITYPOSITION[k].latitude},${CITYPOSITION[k].longitude})`;break;}} else {s = "(39.915156,116.403981)";}}}// 没值的话就默认一个地点if (s.trim() === "" || s.trim() === "()") {s = "(116.403981,39.915156)";}if (s.indexOf("(") <= -1) continue;s = s.replace('(', '').replace(')', '');let coordinate1 = null;let coordinate2 = null;if (points[i].coordinate) {coordinate1 = s.split(',')[0].trim();coordinate2 = s.split(',')[1].trim();} let point = new BMap.Point(coordinate1, coordinate2); //将标注点转化成地图上的点let myIcon = null;// 自定义图标点的样式 可以阿里图标库去下载if (!points[i].coordinate) {myIcon = new BMap.Icon(require('../../assets/map/point/positionBlue.png'), new BMap.Size(19, 25));} else {myIcon = new BMap.Icon(require('../../assets/map/point/redPosition.png'), new BMap.Size(19, 25));}let label = undefinedif (points[i].coordinate) {label = new BMap.Label(points[i].name, {offset: new BMap.Size(18, -3), //内容偏移量+ 标注点显示的标题});label.setStyle({ border: 'none', fontSize: "5px", backgroundColor: 'rgba(156,156,156,0.3)' });}let marker = undefinedmarker = new BMap.Marker(point, { icon: myIcon }); //将点转化成标注点 第二个参数为undefined的时候就是默认的实心红色图标map.addEventListener("zoomend", function () {// console.log("地图缩放至："+this.getZoom()+"级");// if (this.getZoom() >= 3) {if (marker.getLabel()) {marker.getLabel().setStyle({ border: 'none', fontSize: "5px", backgroundColor: 'rgba(156,156,156,0.3)', display: 'block' })}marker.setLabel(label)});map.addOverlay(marker); //将标注点添加到地图上//添加监听事件let thePoint = points[i];// 点击图标出现的默认样式弹窗marker.addEventListener('click',function () {if (points[i].coordinate) {let opts = {width: 310,// 信息窗口宽度height: 258,// 信息窗口高度};let taskIds = thePoint.taskIds;const keys = [];for (let i in taskIds) {keys.push(i);}const { checkTypeList } = this.state;let d = keys.indexOf('定期检测') > -1;if (d) {if (checkTypeList.indexOf('定期检测') <= -1) {d = false;}}let sContent ='<div style="margin:0 0 5px 0;padding:0.2em 0">' +'<div style="height: 30%"><div>' + thePoint.name + '' + (thePoint.rangeName ? ('(' + thePoint.rangeName + ')') : '') + '</div>' +'<div>' + points[i].type_first + '' + (thePoint.route_code ? ('/' + thePoint.route_code) : '') + '' + (thePoint.center_stake_code ? ('/' + thePoint.center_stake_code) : '') + '</div></div>' +'<div>' +'<div style="width: 50%;display: inline-block;margin-top: 20px">' +'<img style="width: 51px;height: 51px" src="' + image2 + '"/><button style="margin-left: 10px;border: none" id="base" ' +'value="' + thePoint.bridge_id + '#' + thePoint.task_id + '#' + thePoint.name + '#' + thePoint.rangeName + '#' + thePoint.type_first + '#' + thePoint.type_second + '">基本信息</button></div>' +(d ?'<div style="width: 50%;display: inline-block;margin-top: 20px">' +'<img style="width: 50px;height: 45px" src="' + image1 + '"/><button style="margin-left: 10px;border: none" id="check" ' +'value="' + thePoint.bridge_id + '#' + taskIds['定期检测'] + '#' + thePoint.name + '#' + thePoint.rangeName + '#' + thePoint.type_first + '#' + thePoint.center_stake_code + '#' + thePoint.type_second + '#' + thePoint.create_time + '">定期检测</button></div></div>' : '') +let infoWindow = new BMap.InfoWindow(sContent, opts); //创建信息窗口对象infoWindow.addEventListener('open', function () {const base = document.getElementById('base');const value = base.value;//基本信息base.addEventListener('click', function () {const params = {id: value.split('#')[0],name: value.split('#')[2],rangeName: value.split('#')[3],type_first: value.split('#')[4],type_second: value.split('#')[5],};this.setState({baseInfoVisible: true,bridgeRecord: params,taskId: value.split('#')[1],});}.bind(this));//定期检查if (d) {const check = document.getElementById('check');const checkValue = check.value;check.addEventListener('click', function () {});}.bind(this));}}.bind(this));marker.openInfoWindow(infoWindow);} else {let kk = [], pp = []kk = this.groupBy(points, function (item) {return [item.area];//按照name进行分组});kk.forEach(item => {if (points[i].area) {if (item[0].area == points[i].area) pp = item} else {if (item[0].area == "北京市/东城区") pp = item}})console.log(kk)console.log(pp)this.setState({dataBridgeNoPosition: pp,bridgeNoPositionVisible: true})}}.bind(this));}this.setState({map,})};
大部分都是公司前人写的 我加了一些逻辑修改 在这里记录一下 biubiubiubiu········
