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', {// 设置地图容器idviewMode: '2D', // 是否为3D地图模式zoom: 10, // 初始化地图级别center: [116.397428, 39.90923], // 初始化地图中心点位置});};).catch((e) => {console.log(e);});return () => {map?.destroy(); //销毁地图};}, []);return (<divid="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', {// 设置地图容器idviewMode: '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.15plugins: [], // 需要使用的的插件列表，如比例尺'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;}
}