基于React-Amap组件库的高德地图简单应用

摘要

 　　平常生活中，地图导航是必不可少的，最近在学习Ant Design，了解了下社区的精选组件，看到了与地图相关的精品组件库，高德地图组件库。所以记录下这次高德地图的使用心得，既可以提升自己的业务多样性，也可以分享给需要的小伙伴。

 

React-Amap用法

安装

npm install --save react-amap

React用法

　　import { Map } from 'react-amap'; 引入高德地图组件，然后根据案例文档配置高德地图模式，更多模式配置参考案例文档：https://elemefe.github.io/react-amap/components/about

import React from 'react'; import { Map } from 'react-amap'; import './map.less'; const GodMap = () => { // 定义高德地图插件 const plugins = [ 'MapType', 'Scale', 'OverView', 'ControlBar', { name: 'ToolBar', options: { visible: true, onCreated(ins) { console.log(ins); } } } ]; return ( <div className="map-container"> <h1 className="item">React-高德地图的简单应用</h1> <div className="map"> <Map plugins={plugins} /> </div> </div> ) } export default GodMap;

 

测试效果