【React16.7+React-Baidu-Map】【一】基础版+react-baidu-map版引入

基础版

import React from 'react'
import './index.less'

export default class Home extends React.Component{
    MP(ak) {
        return new Promise(function(resolve, reject) {
        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = `http://api.map.baidu.com/api?v=2.0&ak=${ak}&callback=init`;
        document.head.appendChild(script)
        window.init = () => {
            resolve(window.BMap)
        }
        })
    }
 
    componentDidMount(){
        this.MP("ak******").then(BMap=>{
            var map = new BMap.Map('allmap');            // 创建Map实例
            var point = new BMap.Point(116.404, 39.915); // 创建点坐标
            map.centerAndZoom("福州",15);                 
            map.enableScrollWheelZoom();                 //启用滚轮放大缩小
        });
    }
        
    render(){
        return(
            <div>
              <div id='allmap' style={{width:'100%',height:550}}></div>
            </div>
        )
    }
}

rc-bmap版

官网文档

https://uiwjs.github.io/react-baidu-map/#/

1. 安装依赖 cnpm install rc-bmap --save
2. 引用

import React from 'react'
import {Map,Base} from 'rc-bmap'

const {Point} = Base
export default class Home extends React.Component{
    render() {
	return ( 
        <div style={{ width: '100%',height: '75vh'}}>
            <Map ak="ak****" scrollWheelZoom zoom={15}>
                <Point name="center" lng="116.404" lat="39.915" />
            </Map>
        </div> 
	)
    }
}