React+BMapGL(react+百度地图插件)初体验_react地图插件-优快云博客

本文链接：https://blog.youkuaiyun.com/aWebDeveloper/article/details/131726285

React+BMapGL(react+百度地图插件)初体验

记录两种百度地图插件使用方式：

1、原生js写法

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <meta name="theme-color" content="#000000"/>
  <meta
      name="description"
      content="Web site created using create-react-app"
  />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
  <!--    百度地图script    -->
  <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
  <title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

"您的密钥"替换成你自己申请的密钥，申请非常简单，链接在这里。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './pages/App';
// import App from './pages/App2';

ReactDOM.render(<App/>, document.getElementById('root'));

App.js

import React, {Component} from 'react'

class App extends Component{
    componentDidMount() {
        const map = new window.BMapGL.Map('MapContainer');
        const pointer = new window.BMapGL.Point(116.404, 39.915);
        map.centerAndZoom(pointer, 11);
        map.enableScrollWheelZoom(true);
    }
    
    render() {
        return (<div className="App">
            <div id="MapContainer" style={{ width: '100%', height: document.documentElement.clientHeight }}>地图容器</div>
        </div>)
    }
}

export default App;

要在render函数里面写一个带有宽高的容器“MapContainer”，再在生命周期中初始化地图实例。

1、react写法

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <meta name="theme-color" content="#000000"/>
  <meta
      name="description"
      content="Web site created using create-react-app"
  />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
  <!--    百度地图script    -->
<!--  <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=3KZl51ro96eHrgqBG1PMOPUM2nSARPzo"></script>-->
  <title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './pages/App';
import App from './pages/App2';

ReactDOM.render(<App/>, document.getElementById('root'));

注意这行代码， import ReactDOM from ‘react-dom’;
不要写成 import ReactDOM from ‘react-dom/client’;
我才开始是框架默认的代码，是后面这个样，地图就渲染不出来

App2.js

import React, {Component} from 'react';
import {Map, Marker, NavigationControl, InfoWindow, MapApiLoaderHOC} from 'react-bmapgl';

class App extends Component {
    render() {
        return (
            <div style={{width: '100%', height: document.documentElement.clientHeight}}>
                <Map center={{lng: 116.402544, lat: 39.928216}} zoom="11">
                    <Marker position={{lng: 116.402544, lat: 39.928216}}/>
                    <NavigationControl/>
                    <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/>
                </Map>
            </div>
        )
    }
}

export default MapApiLoaderHOC({ak: '3KZl51ro96eHrgqBG1PMOPUM2nSARPzo'})(App);