1.index.html入口文件配置:
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'您申请的安全密钥',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.MarkerClusterer,插件"></script>
//多个插件时,用逗号进行分隔
2.下载适配于react项目的高德地图的第三方包:
集成了所有依赖包
npm install @uiw/react-amap --save
或者按需安装包
npm install @uiw/react-amap-map @uiw/react-amap-api-loader --save
3.组件引入第三方包:
//按需引入插件
import { Map, APILoader, Marker } from '@uiw/react-amap';
4.组件中使用:
// 注意组件中属性没有写,需手动按需书写
*/}
<Map style={{ height: 300 }} >
{/* 收到缩放或放大地图 :无法和点标记一起使用 */}
{/* <ToolBarControl visiable={show} offset={[10, 10]} position="RT" /> */}
{/* 获取城市实时天气 */}
{({ AMap, map, container }) => {
return
{/* 文本标记 */}
{/* 点标记 */}
}}