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

測試效果

版權聲明：本文為博主原創文章，轉載請附上原文出處鏈接和本聲明。