百度地图的引用安装ak啥的,我觉得只要从事前端就一定知道,所以不说了。
组件内还改了地图的icon,修改了样式,如果有需要可以私聊我
话不多说 直接上代码
import React, { PureComponent } from 'react';
import Styles from './index.css'; //只是百分百显示
import "./dumap.css" //样式文件
import styleJson from './styleJson'
import u65 from '../../assets/imgTran/u150.png'
export default class BaiDuMap extends PureComponent {
constructor(props) {
super(props);
this.map = null;
}
componentDidMount() {
const { point: [lng, lat], mapData } = this.props;
const [defaultLng, defaultLat] = [103.83, 36.05];
var myIcon = new BMapGL.Icon(u65, new BMapGL.Size(30, 30), {
anchor: new BMapGL.Size(10, 25)
})
this.map = new window.BMapGL.Map('box'); // 创建Map实例
this.map.centerAndZoom(new window.BMapGL.Point(lng || defaultLng, lat || defaultLat), 13); // 初始化地图,设置中心点坐标和地图级别
this.map.enableScrollWheelZoom(true);
this.map.clearOverlays();
this.map.setMapStyleV2({ styleJson })
mapData.forEach(element => {
if (element.locationLongitude && element.locationLatitude) {
if (element.id == 0) {
const marker = new window.BMapGL.Marker(new window.BMapGL.Point(element.locationLongitude || defaultLng, element.locationLatitude), { icon: myIcon });
this.map.addOverlay(marker);
this.markerPoint(marker, element)
}
}
});
}
componentDidUpdate() {
const { mapData } = this.props;
this.map.clearOverlays();
mapData.forEach(element => {
if (element.locationLongitude && element.locationLatitude) {
const marker = new window.BMapGL.Marker(new window.BMapGL.Point(element.locationLongitude, element.locationLatitude));
this.map.addOverlay(marker);
this.markerPoint(marker, element)
}
});
}
// 通过数据标记点并且弹出信息框信息
markerPoint = (marker, info) => {
// 创建信息窗口background:#02a7f0;
const opts = {
width: 200,
height: 100,
title: `任务编号:${info.facilityName}`
};
const sContent = `<div>
<div style='font-size:13px;'>
信息来源:${info.area}
</div>
<div style='font-size:13px;'>
任务等级:${info.maintenanceUnit}
</div>
<div style='font-size:13px;'>
上报时间:${info.maintenanceUnit}
</div>
<div style='font-size:13px;'>
指派人:${info.maintenanceUnit}
</div>
</div>`;
const infoWindow = new window.BMapGL.InfoWindow(sContent, opts);
// eslint-disable-next-line func-names
marker.addEventListener('click', function () {
this.openInfoWindow(infoWindow); // 开启信息窗口
});
}
render() {
return <div id="box" className={Styles.box} />;
}
}
用法
//引用
import BaiDuMap from '@/components/BaiDuMapTranscript';
//使用
<BaiDuMap point={[116.2317, 39.5427]} mapData={mapData} />
//数据格式
let mapData = [
{
locationLongitude: 116.2317,
locationLatitude: 39.5429,
area: '北京',
maintenanceUnit: '三只羊网络',
facilityName: 'RW3255654453432',
id: 0,
}
]
效果