腾讯地图打开地图选取位置 withMap

https://lbs.qq.com/tool/component-picker.html

withMap

import React, { Component } from "react";
export default function withMap() {
  return function(Target) {
    return class WithMap extends Component {
      state = {
        open: false,
        cb: null,
      };

      componentDidMount() {
        const _this = this;
        window.addEventListener("message", this.handleMessage, false);
      }
      componentWillUnmount() {
        window.removeEventListener("message", this.handleMessage);
      }
      handleMessage = event => {
        var loc = event.data;
        if (loc && loc.module == "locationPicker") {
          this.handleToogleOpen(false)(loc);
        }
      };
      handleToogleOpen = (is, cb) => loc => {
        this.setState(prevState => ({
          open: is,
          cb: !!cb ? cb : prevState.cb,
        }));

        const { cb: scb } = this.state;
        if (loc && scb) {
          scb(loc);
        }
      };
      render() {
        return (
          <>
            {this.state.open && (
              <iframe
                id="mapPage"
                style={{
                  width: "100%",
                  height: "100vh",
                  zIndex: "1200",
                  position: "fixed",
                  top: "0",
                  left: "0",
                  right: "0",
                }}
                frameBorder="0"
                src={`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=VT4BZ-42ZWX-EZL43-76VKV-OJXIQ-MIFLF&referer=myapp`}
              />
            )}

            <Target {...this.props} handleToogleOpen={this.handleToogleOpen} />
          </>
        );
      }
    };
  };
}

使用

@withMap() // 注入即可
@inject(MAINTENANCESTORE)
@observer
class ApplyForMaintenance extends Component {
  render() {
    const { maintenanceStore, handleToogleOpen } = this.props;

    const getAddress = handleToogleOpen(true, loc => {
      l(loc);
      maintenanceStore.AFM.address = loc.poiaddress;
    });
    return (
          <TextField
            required
            fullWidth
            label="地址"
            onFocus={getAddress}
            value={maintenanceStore.AFM.address}
          />
    );
  }
}