React AmAP integration

takeaway

React React

  • Integrate amap
  • Address search markup using the Amap API

Operating practice

Log in to Autonavi Open Platform (registration required), on the console -> Application Management -> My Application -> Create a new application; After filling in the application information, you will get a key, which can be used to operate and call the Amap API

developer.amap.com/

The React integration

Add the Amap style and JS resource file to the Document. ejS head TAB

In the corresponding application key, fill in the key applied in Autonavi Open platform

<link
  rel="stylesheet"
  href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
/>
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
<link
  rel="stylesheet"
  href="https://cache.amap.com/lbs/static/AMap.PlaceSearchRender1120.css"
/>
<script
  crossorigin="anonymous"
  id="amap_plus_js"
  src="Https://webapi.amap.com/maps?v=1.4.15&key= application key&plugin = AMap. PlaceSearch"
  type="text/javascript"
></script>
<script
  type="text/javascript"
  src="https://cache.amap.com/lbs/static/PlaceSearchRender.js"
></script>
Copy the code

Create a new interface for display

  • The moose – react – learn to chestnut

    • Project address gitee.com/shizidada/m…

  • Pages directory -> Create Tool directory -> Create amap directory

. ├ ─ ─ the SRC │ ├ ─ ─ pages │ │ ├ ─ ─ Tool │ │ │ ├ ─ ─ amap │ │ │ │ ├ ─ ─ index. The JSX │ │ │ │ ├ ─ ─ idnex. Less...Copy the code

Initialize AMap

const AMapPage = () = > {
  let mMap = null;

  const initMap = () = > {
    if (window.AMap) {
      mMap = new AMap.Map("all-map", {
        resizeEnable: true}); }}; useEffect(() = > {
    initMap();
    return () = >{}; } []);return (
    <PageHeaderWrapper>
      <Card>
        <div className={styles.amapContainer}>
          <div className={styles.mainMap}>
            <div id="all-map" className={styles.aMap}></div>
          </div>
        </div>
      </Card>
    </PageHeaderWrapper>
  );
};
export default AMapPage;
Copy the code

  • indocument.ejsAfter the AMap resource is added, an AMap object is mounted globally

  • AMap object construction requires passing a DOM element. Let the mount show up.

Add a search function

  • Amap provides PlaceSearch objects that provide search
  • A Form on the interface that is manipulated and displayed using the Form in the Antd component
. <div className={styles.operator}><AddressForm onSearch={onSearch} />
</div>

...
Copy the code

AddressForm

const AddressForm = ({ onSearch }) = > {
  const [form] = Form.useForm();

  return (
    <Form layout="inline" form={form} onFinish={onSearch}>
      <Form.Item label="Enter address" name="address">
        <Input placeholder="Enter address" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">search</Button>
      </Form.Item>
    </Form>
  );
};
Copy the code
  • Antd FormThere is a big difference between 4.x and 3.x versions in use

Search logic


/ / AMap object
let mMap = null;
letmarkers = []; .const handlePlaceSearch = (value) = > {
  if(! value)return;
  if(! mMap) { initMap(); }// Delete a query annotation
  mMap.remove(markers);

  let placeSearch = new AMap.PlaceSearch({
    // city specifies the city to search for. The supported formats are city name, citycode, and adcode
    // city: '010',
  });

  placeSearch.search(value, function (status, result) {
    // If the query succeeds, result indicates the matching POI information
    console.log("Query successful ::", result);
    if (result.poiList) {
      let pois = result.poiList && result.poiList.pois;
      for (let i = 0; i < pois.length; i++) {
        let poi = pois[i];
        markers[i] = new AMap.Marker({
          position: poi.location, // Latitude and longitude objects can also be one-dimensional arrays of latitude and longitude [125.35, 36.5]
          title: poi.name,

          // You can customize the dot marking image
          // icon: '',
        });
        // Add the created dot mark to the existing map instance:mMap.add(markers[i]); } mMap.setFitView(); }}); };const onSearch = (values) = > {
  const { address } = values;
  handlePlaceSearch(address);
  console.log("onSearch :: ", values);
};
Copy the code
  • Get input from the Form Form
  • Call the PlaceSearch plug-in to search (POI)
  • Query the result and mark it with Marker

The last point mark should be removed before the next query. Otherwise, the last point mark will appear on the map

Phase to recommend

React Practice – Added emoticons to chat screen

More API References

Developer.amap.com/demo/javasc…