基於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;

 

測試效果