Preface

Recently assigned tasks , To use Baidu map , I happen to be using it Antd Design Pro V5. Just share a wave of Baidu map into pro Methods in the project , There are two ways . Apply for baidu account and ak Don't write anything like that , There are also many online tutorials .

1. Use BMap call JavaScript API

First, in the document.ejs Of head in , Global reference Baidu map API file

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak= Your key "></script>
<script>
    window.BMap = BMap
</script>

But only add the above two items , After we call window.BMap When , Will prompt in window I can't find it in China. 'BMap' attribute

At this point, we just need to find typing.d.ts Declaration file , It's just src Under the table of contents

stay window Add attributes to the extended interface of BMap

At this point, you are calling var BMap = window.BMap; There will be no prompt that the attribute cannot be found .

// example Demo
class map extends React.Component {
    

  componentDidMount() {
    
    const lng = 116.404; // Set latitude and longitude 
    const lat = 39.915;
    var BMap = window.BMap
    var map = new BMap.Map("container");
    var point = new BMap.Point(lng, lat);
    map.centerAndZoom(point, 18); 				//  Initialize map 
    map.addControl(new BMap.MapTypeControl()); 	//  Add a map type control 
    map.enableScrollWheelZoom(true); 			//  Turn on mouse wheel zoom 
  }
  render() {
    
    return (
    <PageContainer>
      <div id="container" style={
    {
    	// Create map container elements 
        width: '100vw',
        height: '100vh',
        margin: "-24px"
      }} />
    </PageContainer>);
  }
}

export default map;

The renderings are as follows ：

2. install react-bmap Components

First npm install react-bmap

npm install react-bmap --save

stay package.json View in , The component package has been successfully installed

When calling immediately , You will be prompted that the module cannot be found

At this time, we still need to go typing.d.ts Module declaration in

At this time, it can be used normally .

import React from 'react'
import {
    Map, Marker, NavigationControl, InfoWindow} from 'react-bmap'
export default (): React.ReactNode => {
    
  const lng = 116.404; // Set latitude and longitude 
  const lat = 39.915;
  return (
    <PageContainer>
      <div>
          <Map center={
    {
     lng, lat }} zoom="18" ScrollWheelZoom="true">
            <Marker position={
    {
     lng, lat }} />
            <NavigationControl />
            <InfoWindow position={
    {
     lng, lat }} text=" Hello " title=" bye " />
          </Map>
      </div>
    </PageContainer >
  )
}

design sketch ：

3. summary

The above are the problems and solutions I have encountered in introducing Baidu map into the project , I hope you guys will criticize and correct .