1.html 页面引入 相关js
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
<link href="lib/baidumapv2/css/baidu_map_v2.css" rel="stylesheet" type="text/css"/>
<script src="lib/baidumapv2/baidumap_offline_v2_load.js"></script>
<script src="lib/baidumapv2/tools/TextIconOverlay_min.js"></script>
<script src="lib/baidumapv2/tools/MarkerClusterer_min.js"></script>
<script>
// 实例化 百度地图
window.BMap = BMap;
window.BMapLib = BMapLib;
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
2.创建 BMap 组件
src/components/BMap/index.js
/**
* 百度地图 组件
*/
import React,{ PureComponent } from 'react';
// 获取屏幕宽高
const width = document.documentElement.clientWidth + 'px';
const height = document.documentElement.clientHeight - 95 + 'px';
class BMap extends PureComponent {
// 构造函数
constructor(props) {
super(props);
this.state = {
//
};
}
// 生命周期
componentDidMount () {
var BMap = window.BMap
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
}
render(){
return (
<div id='allmap' style={{width,height:height}}></div>
)
}
}
export default BMap;
.
.