摘要
平常生活中，地圖導航是必不可少的，最近在學習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;
測驗效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/67761.html
標籤：JavaScript
上一篇：閉包和js事件執行機制簡介