按照以下三個步驟即可:
1、首先要去百度地圖上申請密鑰。
2、在react中引入百度地圖相關script
例如是用create-react-app方式創建的項目,就在public/index.html的<head></head>中加入script
如下:
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=自己的密鑰" ></script>
3、為了防止之后報錯BMap is not defined,我這里采用的是引用echarts,在echarts里繪制百度地圖的方法。
我用的版本是:
"echarts": "3.7.2"
"echarts-for-react": "2.0.6"
代碼如下:
// 百度地圖 import React, { Component } from 'react'; import ReactEcharts from 'echarts-for-react'; import 'echarts/dist/extension/bmap'; export default class BaiduMapUseEcharts extends Component { constructor(props) { super(props); this.state = { option: { tooltip: { trigger: 'item' }, bmap: { center: [116.331398, 39.897445], zoom: 10, roam: true }, series: [ { type: 'scatter', coordinateSystem: 'bmap', data: [ { value: [116.384722, 39.977552] } ], symbol: 'pin', symbolSize: '16', itemStyle: { normal: { color: '#FF4500' }, emphasis: { color: 'red' } } } ] } }; } render() { return ( <div> <ReactEcharts ref={(element) => { this.echartsReact = element; }} style={{width: '100%', height: '366px'}} option={this.state.option} notMerge lazyUpdate /> </div> ); } }