React--百度地图之在线地图

前言：百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

一、在百度官网获得自己的AK(密钥)

获取AK地址：百度地图开放平台 | 百度地图API SDK | 地图开发

二、引入js

引入public\index.html

<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的秘钥"></script>

第三步 、引入组件

安装：

npm i react-bmapgl -S

import {Map, Marker, NavigationControl, InfoWindow,Polyline,Polygon,ZoomControl } from 'react-bmapgl';

第四、Map

引用获取

ref={ref => {this.map = ref.map}}

 地图中心

center={
{lng: center.lon, lat: center.lat}} 

 缩放层级

zoom="13" 

 鼠标缩放滚动

 enableScrollWheelZoom={true}

 样式

style={
{ height: 600 }}>

接下来就可以在页面中渲染地图了！！！

import React, { Component } from 'react'
import BMap from 'BMap'

export default class MAP extends Component {

    constructor(props) {

        super(props);
        this.state = {}
    }
    componentDidMount() {

        // 创建Map实例
        var map = new BMap.Map("allmap");
        // 初始化地图,用城市名设置地图中心点
        map.centerAndZoom("郑州", 11);
    }
    render() {

        return (
            <div id="allmap" style={
{ width: '100%', height: '400px' }}></div>
        )
    }
}