react hooks 高德地图的应用

一、准备

1.登录控制台

登录高德开放平台控制台，如果没有开发者账号，请注册开发者。

2.创建 key

进入应用管理，创建新应用，新应用中添加 key，服务平台选择 Web端(JS API)。

3.获取 key 和密钥

创建成功后，可获取 key 和安全密钥。

二、初始化地图

1.下载依赖包

npm i @amap/amap-jsapi-loader --save

2.引入 JS API Loader

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

3.新建 MapContainer.jsx 文件

在项目中新建 MapContainer.jsx 文件，用作地图组件脚本。

import AMapLoader from '@amap/amap-jsapi-loader';
import { useEffect } from 'react';
import styles from './MapContainer.css';

export default function MapContainer() {
  let map: any = null;

  useEffect(() => {
    AMapLoader.load({
      key: 'key', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    })
      .then((AMap: any) => {
        //创建地图实例
        map = new AMap.Map('container', {
          // 设置地图容器id
          viewMode: '2D', // 是否为3D地图模式
          zoom: 10, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        });
      };)
      .catch((e) => {
        console.log(e);
      });

    return () => {
      map?.destroy(); //销毁地图
    };
  }, []);

  return (
      <div
        id="container"
        className={styles.container}
        style={{ height: '800px' }}
      ></div>
  );
}

4.新建 MapContainer.less 文件

在项目中新建 MapContainer.less 文件，用作地图组件样式。

.container{
  padding: 0px;
  margin: 0px;
  width: 100%;
}

5.效果图

三、插件的使用

1.基础插件引入

AMap.plugin(
    ['AMap.Scale', 'AMap.Geolocation', 'AMap.ToolBar', 'AMap.ControlBar'],
    function () {
        //在回调函数中实例化插件，并使用插件功能
        map.addControl(new AMap.Scale()); //比例尺
        map.addControl(new AMap.ToolBar()); //缩放工具条
        map.addControl(new AMap.ControlBar()); //控制罗盘
        map.addControl(
          new AMap.Geolocation({
            position: {
              bottom: '80px',
              left: '15px',
            },
          }),
        ); //定位控件，用来获取和展示用户主机所在的经纬度位置
    },
);

更多插件参考官方文档～

2.信息窗体 InfoWindow

默认信息窗体封装了关闭按钮，使用 API 默认的信息窗体样式，这个时候只需要对 InfoWindow 设定 content 属性即可，content 可以是 dom 对象，也可以是 html 识别的字符串。

        //定义信息窗口
        let infoWindow: any = null;
        
        //打开信息窗体
        map.on('click', function (e: any) {
          //构建信息窗体中显示的内容
          let info = [];
          info.push(
            '<div class=\'input-card content-window-card\'><div><img style="float:left;width:67px;height:16px;" src=" https://webapi.amap.com/images/autonavi.png "/></div> ',
          );
          info.push('<div style="padding:7px 0px 0px 0px;"><h4>高德软件</h4>');
          info.push(
            "<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>",
          );
          info.push(
            "<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>",
          );

          infoWindow = new AMap.InfoWindow({
            content: info.join(''), //使用默认信息窗体框样式，显示信息内容
          });

          infoWindow?.open(map, e.lnglat);
        });

        // 关闭信息窗体
        // infoWindow?.close();

3.右键菜单 ContextMenu

        //添加右键点击事件
        let contextMenu: any = null;

        //地图绑定鼠标右击事件——弹出右键菜单
        map.on('rightclick', function (e: any) {
          let contextMenuPositon: any = null;
          contextMenu = new AMap.ContextMenu({ isOpen: false });
          //右键放大
          contextMenu?.addItem(
            '放大一级',
            function () {
              map.zoomIn();
            },
            0,
          );

          //右键缩小
          contextMenu?.addItem(
            '缩小一级',
            function () {
              map.zoomOut();
            },
            1,
          );

          //右键显示全国范围
          contextMenu?.addItem(
            '缩放至全国范围',
            function () {
              map.setZoomAndCenter(4, [108.946609, 34.262324]);
            },
            2,
          );

          //右键添加Marker标记
          contextMenu?.addItem(
            '添加标记',
            function () {
              new AMap.Marker({
                map: map,
                position: contextMenuPositon, //基点位置
              });
            },
            3,
          );

          contextMenu?.open(map, e.lnglat);
          contextMenuPositon = e.lnglat;
        });

        // 关闭右键弹框
        // contextMenu?.close();

4.输入提示与 POI 搜索示例

首先需要设置一下密钥

window._AMapSecurityConfig = {
  securityJsCode: 'b4fcd93bbbaead6bcc38957a0f0e3df6',
};

创建id为tipinput的输入框

<input id="tipinput" />

配置

        // 搜索
        let auto = new AMap.AutoComplete({ input: 'tipinput' });
        let placeSearch = new AMap.PlaceSearch({
          map: map,
        }); //构造地点查询类
        auto.on('select', function (e: any) {
          placeSearch.setCity(e.poi.adcode);
          placeSearch.search(e.poi.name); //关键字查询查询
        }); //注册监听，当选中某条记录时会触发

四、完整代码

1.效果图

2.代码

import AMapLoader from '@amap/amap-jsapi-loader';
import { Input } from 'antd';
import { useEffect } from 'react';
import './MapContainer.less';
window._AMapSecurityConfig = {
  securityJsCode: 'b4fcd93bbbaead6bcc38957a0f0e3df6',
};
export default function MapContainer() {
  let map: any = null;

  const createMap = (AMap: any) => {
    //1.创建地图实例
    map = new AMap.Map('container', {
      // 设置地图容器id
      viewMode: '2D', // 是否为3D地图模式
      zoom: 10, // 初始化地图级别
      center: [116.397428, 39.90923], // 初始化地图中心点位置
      resizeEnable: true, // 调整大小启用
      //   layers: [new AMap.TileLayer.Satellite()], //设置图层,可设置成包含一个或多个图层的数组
      //   mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
    });

    // 2.加载插件
    AMap.plugin(
      [
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.HawkEye',
        'AMap.ControlBar',
        'AMap.MapType',
        'AMap.Geolocation',
        'AMap.ContextMenu',
        'AMap.AutoComplete',
        'AMap.PlaceSearch',
      ],
      function () {
        //在回调函数中实例化插件，并使用插件功能
        map.addControl(
          new AMap.ControlBar({
            position: {
              top: '10px',
              right: '10px',
            },
          }),
        ); //控制罗盘
        map.addControl(new AMap.HawkEye()); //鹰眼
        map.addControl(
          new AMap.Geolocation({
            position: {
              bottom: '160px',
              left: '20px',
            },
          }),
        ); //定位控件，用来获取和展示用户主机所在的经纬度位置
        map.addControl(
          new AMap.ToolBar({
            position: {
              bottom: '80px',
              left: '21px',
            },
          }),
        ); //缩放工具条
        map.addControl(
          new AMap.Scale({
            position: {
              bottom: '35px',
              left: '20px',
            },
          }),
        ); //比例尺

        // map.addControl(
        //   new AMap.MapType({
        //     position: {
        //       bottom: '300px',
        //       right: '0',
        //     },
        //   }),
        // ); //类别切换控件

        //3.添加右键点击事件
        let contextMenu: any = null;
        //4.信息窗口
        let infoWindow: any = null;

        //地图绑定鼠标右击事件——弹出右键菜单
        map.on('rightclick', function (e: any) {
          infoWindow?.close(); //清空点击事件弹框
          let contextMenuPositon: any = null;
          contextMenu = new AMap.ContextMenu({ isOpen: false });
          //右键放大
          contextMenu?.addItem(
            '放大一级',
            function () {
              map.zoomIn();
            },
            0,
          );

          //右键缩小
          contextMenu?.addItem(
            '缩小一级',
            function () {
              map.zoomOut();
            },
            1,
          );

          //右键显示全国范围
          contextMenu?.addItem(
            '缩放至全国范围',
            function () {
              map.setZoomAndCenter(4, [108.946609, 34.262324]);
            },
            2,
          );

          //右键添加Marker标记
          contextMenu?.addItem(
            '添加标记',
            function () {
              new AMap.Marker({
                map: map,
                position: contextMenuPositon, //基点位置
              });
            },
            3,
          );

          contextMenu?.open(map, e.lnglat);
          contextMenuPositon = e.lnglat;
        });

        //打开信息窗体
        map.on('click', function (e: any) {
          contextMenu?.close(); //关闭右键弹框
          //构建信息窗体中显示的内容
          let info = [];
          info.push(
            '<div class=\'input-card content-window-card\'><div><img style="float:left;width:67px;height:16px;" src=" https://webapi.amap.com/images/autonavi.png "/></div> ',
          );
          info.push('<div style="padding:7px 0px 0px 0px;"><h4>高德软件</h4>');
          info.push(
            "<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>",
          );
          info.push(
            "<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>",
          );

          infoWindow = new AMap.InfoWindow({
            content: info.join(''), //使用默认信息窗体框样式，显示信息内容
          });

          infoWindow?.open(map, e.lnglat);
        });

        // 4.搜索
        let auto = new AMap.AutoComplete({ input: 'tipinput' });
        let placeSearch = new AMap.PlaceSearch({
          map: map,
        }); //构造地点查询类
        auto.on('select', function (e: any) {
          placeSearch.setCity(e.poi.adcode);
          placeSearch.search(e.poi.name); //关键字查询查询
        }); //注册监听，当选中某条记录时会触发
      },
    );
  };

  const onCatch = (e: any) => {
    console.log(e);
  };

  const mountMap = () => {
    map?.destroy(); //销毁地图
  };

  useEffect(() => {
    AMapLoader.load({
      key: 'e558ae3e565bc8f545a98d88794aada5', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then(createMap)
      .catch(onCatch);

    return mountMap;
  }, []);

  return (
    <div className="map">
      <div id="container" style={{ height: '800px' }}></div>
      <Input id="tipinput" placeholder="请输入搜索内容" />
    </div>
  );
}

3.样式

.map {
  position: relative;
  .container {
    padding: 0px;
    margin: 0px;
    width: 100%;
  }
  #tipinput {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 200px;
  }
  .amap-sug-result {
    z-index: 9999;
    visibility: visible;
  }
}