在react函数组件中实现高德地图搜索功能

1.高德地图api申请key以及安全密钥

申请key的部分依据高德api提示处傻瓜式注册即可获得,申请完成后,打开右上角头像,在应用管理->我的应用中即可查看到自己的密钥和key

2.返回到api界面搜索react,即可出现''JS API 结合React使用''项,点开

随后依据操作,逐步执行

3.脚手架配置密钥

在public->index.html中,加入

    <script type="text/javascript">

      window._AMapSecurityConfig = {

        securityJsCode: "你的密钥",

      };

    </script>

4.依据高德api界面中的AMapLoader.load 方法异步加载多个插件方式做配置

这里直接给出示例代码:

import { useEffect } from "react";

import styles from "./MapContainer.css";

import AMapLoader from "@amap/amap-jsapi-loader";

export default function MapContainer() {

  let map = null;

  useEffect(() => {

    AMapLoader.load({

      key: "你的key", // 申请好的Web端开发者Key，首次调用 load 时必填

      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

      plugins: ["AMap.AutoComplete",'AMap.PlaceSearch'], // 添加输入提示插件

    })

      .then((AMap) => {

        map = new AMap.Map("container", {   //访问成功则创建map对象

          // 设置地图容器id

          viewMode: "3D", // 是否为3D地图模式

          zoom: 11, // 初始化地图级别

          center: [116.397428, 39.90923], // 初始化地图中心点位置

        });

        map.on('complete', function(){      //map的生命周期方法

            var autoOptions = {

                input: "input_id"

            };

            //地图图块加载完成后触发

            var auto = new AMap.AutoComplete(autoOptions);  //实例化AutoComplete模块

            var placeSearch = new AMap.PlaceSearch({

            map: map            //文档中的map参数

        });  //构造地点查询类

        auto.on("select", function(e) {

          console.log(e);

          placeSearch.setCity(e.poi.adcode);

          placeSearch.search(e.poi.name);  //关键字查询查询

      });//注册监听，当选中某条记录时会触发

          });

   

      })

      .catch((e) => {

        console.log(e);

      });

    return () => {

      map?.destroy();

    };

  }, []);

  return (

    <div>

        <div

            id="container"

            className={styles.container}

            style={{ height: "300px",width:"1000px" ,marginTop:"100px"}}

        >

    </div>

    <div>

    <input

        type="text"

        id="input_id" // 替换为实际输入框的 id

        placeholder="输入城市名称"

      />

    </div>

    </div>

  );

}

最后运行脚手架即可实现搜索点击跳转功能,如下图所示: