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>
);
}
最后运行脚手架即可实现搜索点击跳转功能,如下图所示: