mapPlus Loader

註冊

請前往 Kwmap Docs 註冊帳號，取得 accessKey 與 accessToken。

安裝

``bash
npm install @kwmap/mapplus
`

使用方法

*

$3

`javascript
import mapPlus from '@kwmap/mapplus';

const map = await new mapPlus(document.getElementById('map'), {
accessKey: 'get_your_key',
accessToken: 'get_your_token',
style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
center: [121.53559860212545, 25.029308142529132],
});

map.on('style.load', () => {
// 可以開始調用 map
});
`

*

$3

#### main.jsx

於 main.jsx 使用 包裹 useMap() 與 作用域。

`jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { MapProvider } from '@kwmap/mapplus/libs/react';
import Map from './components/Map';
import './main.css';

createRoot(document.getElementById('root')).render(



,
);
`

#### components/Map.jsx

建立 components/Map.jsx，並引入 與 useMap()，即可開始使用地圖。

`jsx
import { useEffect } from 'react';
import { MapComponent, useMap, mapPlus } from '@kwmap/mapplus/libs/react';

export default function Map() {
const { map } = useMap();

useEffect(() => {
if (map) {
// 可以開始調用 map
}
}, [map]);

return (
mapOptions={{
accessKey: 'get_your_key',
accessToken: 'get_your_token',
style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
center: [121.53559860212545, 25.029308142529132],
}}
/>
)
}
`

*

$3

#### components/Map.vue

建立 components/Map.jsx，並引入 與 useMap()，即可開始使用地圖。

`vue



`

*

$3

在 vite.config.js 中引入 viteMapPlusPlugin()。

`js
import { defineConfig } from 'vite';
import viteMapPlusPlugin from '@kwmap/mapplus/libs/vite';

export default defineConfig({
plugins: [
viteMapPlusPlugin(),
],
});
``