qh-map

A Easy Gaode Map Component for React, Support Lazy load (Build on the Gaode Map SDK)

Installation

npm install qh-map --save 

or

yarn add qh-map

Lazy Load

Now qh-map support real lazy-load feature, the map instance will be initilized right now once the script is loaded!

  // part of source code (helper.js)
  const script = document.createElement('script');
  script.src = url;
  script.defer = 'defer';
  script.onload = () => {
    callback && callback();
  }

you can specify the url props to instead of default script url.

How Does It Work?

See the Chinese Readme: 中文

When You Want to Use a Map to Locate Sitiation, Just Write Component in your render function, like this:

  import Map from "qh-map";
  
  export default class Demo extends React.Component {
    state = {
      longitude: 0,
      latitude: 0
    }
    render() {
      const { longitude, latitude } = this.state;
      return (
        <div>
          <span>longitude: { longitude }<span>
          <span>latitude:  { latitude }<span>
 
          <Map
            position={[113.326548, 23.125821]} 
            wrapClassName='map-box'
            style={{ 
              width: 1000,
              height: 400, 
              border: "2px solid purple" 
            }}
            errorTips={errorMsg => { 
              console.log(errorMsg); 
            }}
            handleSearchAddress={([longitude, latitude]) => {
              console.log('you will got location:', [longitude, latitude]);
              this.setState({ longitude, latitude });
            }}
            url='https://webapi.amap.com/maps?v=1.4.15&key=your_key' // [NEW] once you pass this params, it will load script from the url instead of default
            plugins={
              toolbar: true,  // [NEW] toolbar plugin on the map left
              scale: false,   // [NEW] scale plugin on the map right-bottom
              overview: false // [NEW] overview plugin
            }
          >
        </div>
      )
    }
  }

And the position props help to initialize component with a begin position, with a format like [longitude, latitude], and then the map should locate the position, and set a marker in center position in this . errorTips props is a useful props to help to show some tips when this component run with some errors, it is not necessary. The handleSearchAddress supply locate result to outter component, the params for callback is as same as position props, you will get [longitude, latitude] finally;

Props:

• position: initial center position (required)
• wrapClassName: pass on className for map container style (non-required)
• style: higher level style for map container style (non-required)
• errorTips: show error message callback function (non-required)
• handleSearchAddress: address search callback, it will be called after you called the Map.searchAddress method (required)
• url: specify your own Gao-de script url address instead of default script url.
• plugins: turn on three new plugins, include toolbar / scale / overview plugin;

Methods:

• Map.searchAddress(address: string): [longitude, latitude] : search address and locate it on the map instance, and return the [longitude, latitude] data.
• Map.loadScript(url: string, scriptId: undefined | string): void : load your own Gao De Map JS-SDK, usually, you don't need to execute it

About Map Mount DOM Class?

Now you can use wrapClassName to define your own map class, and use Inline Style to define style, the wrapClassName and style props is very usefull to control map container style.

Before I Use Map Component

Please notice that when you are using this component, As usual, the component will load GaoDe Map SDK when it is moounted, but you can still use Map.loadScript(url, scriptId) method to load your own script instead, you can replace it with your defination, the scriptId is to help the component to recognize whether the script is loaded. And another usefull method is Map.searchAddress(address), it will help component to locate the address you entered, and the handleSearchAddress props will be called a little later.

License

MIT