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

2024-06-26 12:29| 来源: 网络整理| 查看: 265

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

1、原生js写法

index.html

DOCTYPE html> React App You need to enable JavaScript to run this app.

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

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(, 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 ( width: '100%', height: document.documentElement.clientHeight }}>地图容器 ) } } export default App;

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

1、react写法

index.html

DOCTYPE html> React App You need to enable JavaScript to run this app.

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(, 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 ( width: '100%', height: document.documentElement.clientHeight}}> lng: 116.402544, lat: 39.928216}} zoom="11"> lng: 116.402544, lat: 39.928216}}/> lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/> ) } } export default MapApiLoaderHOC({ak: '3KZl51ro96eHrgqBG1PMOPUM2nSARPzo'})(App);

【本文地址】

公司简介

联系我们