react--百度地图的使用

先看下效果图

需求：当用户输入地址将其匹配的结果地址集标注到地图上，当点击地图上的某个点后将地址填写到input框中

$\star$ 申请成为开发者

$\star$ 在index.html中引入

$\star$ 在组件加载后初始化地图

import React, { useEffect } from "react"; // 利用useEffect的"componentDidMount"特性

let map = new BMapGL.Map("baiduMap"); // 获取地图实例

map.centerAndZoom(prefix?prefix:"杭州市", 12); // 设置地图中心点及缩放比

map.enableScrollWheelZoom(true); // 设置允许鼠标滑动缩放

$\star$ 监听输入框的chang事件以回显标注点的地址，因为不添加该事件的话，无法向value更新值

$\star$ 当用户输入结束，即blur的时机点，获取用户的输入值

（将地址保持到redux中避免重新render组件值被清空；使用正则匹配出省市县作为地图搜索的前缀；@符号将作为分隔符在初始化地图时使用； setMapUp 则用于触发地图的重绘）

$\star$ 在地图重绘期间调用地图api模糊查询并进行标注(useEffect)

（框红一的位置是取到store中保存的地址并获取其前缀信息<即：是否有省市区>；框红二则是调用地图的api进行模糊查询）

$\star$ 当匹配标注的点被点击时执行回调并渲染到input

（百度地图的标注点若想添加点击事件，是需要拿到其坐标进行手动标注的，而我这里是无法事先知道坐标点的，故使用jquery操作dom的形式获取地址信息）

$\star$ 收集坐标信息

let myGeo = new BMapGL.Geocoder();

myGeo.getPoint("地址",在回调函数中获取point)