React 高德地图集成使用
导读
通过本篇学习，基于 React
- 集成高德地图
- 使用高德地图 API 进行地址搜索标记
操作实践
登录高德开放平台（需要注册），在控制台 -> 应用管理 -> 我的应用 -> 创建新应用；填写应用信息之后会得到一个 key，这个 key 可以用来操作调用高德地图 API
React 集成
在 document.ejs head 标签添加高德地图样式和 js 资源文件
在对应申请的 key，填写在高德开放平台申请的 key
<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=申请的key&plugin=AMap.PlaceSearch"
type="text/javascript"
></script>
<script
type="text/javascript"
src="https://cache.amap.com/lbs/static/PlaceSearchRender.js"
></script>
新建一个界面用来显示
-
以
moose-react-learn为栗 -
pages 目录 -> 创建 Tool 目录 -> 创建 amap 目录
...
├── src
│ ├── pages
│ │ ├── Tool
│ │ │ ├── amap
│ │ │ │ ├── index.jsx
│ │ │ │ ├── idnex.less
...
初始化 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;
-
在
document.ejs添加高德地图资源之后，全局会挂载一个 AMap 对象，即高德地图 -
AMap 对象构造需要传一个 DOM 元素。让挂载显示出来。
添加一个搜索功能
- 高德地图提供了 PlaceSearch 对象，提供搜索
- 在界面上一个表单，使用 Antd 组件中中 Form 来操作和显示
...
<div className={styles.operator}>
<AddressForm onSearch={onSearch} />
</div>
...
AddressForm
const AddressForm = ({ onSearch }) => {
const [form] = Form.useForm();
return (
<Form layout="inline" form={form} onFinish={onSearch}>
<Form.Item label="输入地址" name="address">
<Input placeholder="输入地址" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
搜索
</Button>
</Form.Item>
</Form>
);
};
Antd Form4.x 和 3.x 版本使用上有很大的区别
搜索逻辑
// AMap 对象
let mMap = null;
let markers = [];
...
const handlePlaceSearch = (value) => {
if (!value) return;
if (!mMap) {
initMap();
}
// 移除删一次查询标注
mMap.remove(markers);
let placeSearch = new AMap.PlaceSearch({
// city 指定搜索所在城市，支持传入格式有：城市名、citycode 和 adcode
// city: '010',
});
placeSearch.search(value, function (status, result) {
// 查询成功时，result 即对应匹配 POI 信息
console.log("查询成功 :: ", 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, // 经纬度对象，也可以是经纬度构成的一维数组[125.35, 36.5]
title: poi.name,
// 可以自定义 点标记 图片
// icon: '',
});
// 将创建的点标记添加到已有的地图实例：
mMap.add(markers[i]);
}
mMap.setFitView();
}
});
};
const onSearch = (values) => {
const { address } = values;
handlePlaceSearch(address);
console.log("onSearch :: ", values);
};
- 从 Form 表单获取输入的内容
- 调用 PlaceSearch 插件进行搜索(POI)
- 查询出结果，使用 Marker 点标记
每次查询出来的点标记需要保留，在下一次查询之前先移除上一次点标记，否则地图上会出现上一次查询出来的点标记
