\n\n## Requirements\n\n- Vue 3.2+\n\n## Installation\n\nInstall the package using npm:\n\n```bash\nnpm i longdo-map-vue\n```\n\n## Usage\n\nFirst, get your [Longdo Map API key](https://map.longdo.com/console/). You can register the components in two ways:\n\n### Local Registration\nImport and use the component directly in your Vue file (e.g., `App.vue`):\n```html\n\n\n\n
\n
Loading...
\n \n
\n\n```\n\n### Global Registration\n\nRegister the plugin in your `main.js` or `main.ts`:\n\n```js\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport LongdoMap from 'longdo-map-vue'\n\ncreateApp(App)\n .use(LongdoMap, {\n apiKey: 'YOUR_LONGDO_MAP_API_KEY',\n })\n .mount('#app')\n```\n\nNow you can use the component anywhere in your app without importing:\n\n```html\n\n \n\n```\n\n## Components\n\n- [LongdoMap](#longdomap)\n- [LongdoMapMarker](#longdomapmarker)\n- [LongdoMapDot](#longdomapdot)\n- [LongdoMapCircle](#longdomapcircle)\n- [LongdoMapRectangle](#longdomaprectangle)\n- [LongdoMapPolyline](#longdomappolyline)\n- [LongdoMapPolygon](#longdomappolygon)\n\n### LongdoMap\n\n**Props:**\n- `:options` - [MapOptions](http://api.longdo.com/map/doc/ref.php#MapOptions)\n\n**Events:**\n- `@load=\"Function(object)\"` - Fired when map is loaded\n\n**Examples:**\n\nBasic map:\n```html\n\n```\n\nAccessing map object:\n```html\n\n\n\n \n \n \n\n```\n\nUsing custom map source (Longdo Map v2 or Longdo Box server):\n```html\n\n\n\n
\n \n
\n\n```\n\n### LongdoMapMarker\n\n**Props:**\n- `:location` - Location object `{ lon: number, lat: number }`\n- `:options` - [MarkerOptions](http://api.longdo.com/map/doc/ref.php#MarkerOptions)\n\n**Events:**\n- `@add=\"Function(object)\"` - Fired when marker is added to map\n\n**Example:**\n```html\n\n\n\n \n \n \n\n```\n\n### LongdoMapPolyline\n\n**Props:**\n- `:location` - Array of location objects\n- `:options` - [GeometryOptions](http://api.longdo.com/map/doc/ref.php#GeometryOptions)\n\n**Events:**\n- `@add=\"Function(object)\"` - Fired when polyline is added to map\n\n**Examples:**\n\nSolid line:\n```html\n\n\n\n \n \n \n\n```\n\nDashed line:\n```html\n\n\n\n \n \n \n\n```\n\n### LongdoMapPolygon\n\n**Props:**\n- `:location` - Array of location objects (use `null` to separate outer and inner rings for donut polygons)\n- `:options` - [GeometryOptions](http://api.longdo.com/map/doc/ref.php#GeometryOptions)\n\n**Events:**\n- `@add=\"Function(object)\"` - Fired when polygon is added to map\n\n**Examples:**\n\nBasic polygon:\n```html\n\n\n\n \n \n \n\n```\n\nDonut polygon (polygon with hole):\n```html\n\n\n\n \n \n \n \n\n```\n\n### LongdoMapCircle\n\n**Props:**\n- `:location` - Location object `{ lon: number, lat: number }`\n- `:radius` - Radius in degrees\n- `:options` - [GeometryOptions](http://api.longdo.com/map/doc/ref.php#GeometryOptions)\n\n**Events:**\n- `@add=\"Function(object)\"` - Fired when circle is added to map\n\n**Example:**\n```html\n\n\n\n \n \n \n\n```\n\n### LongdoMapDot\n\n**Props:**\n- `:location` - Location object `{ lon: number, lat: number }`\n- `:options` - [GeometryOptions](http://api.longdo.com/map/doc/ref.php#GeometryOptions)\n\n**Events:**\n- `@add=\"Function(object)\"` - Fired when dot is added to map\n\n**Example:**\n```html\n\n\n\n \n \n \n\n```\n\n### LongdoMapRectangle\n\n**Props:**\n- `:location` - Top-left location object `{ lon: number, lat: number }`\n- `:size` - Size object `{ width: number, height: number }` in degrees, or bottom-right location object\n- `:options` - [GeometryOptions](http://api.longdo.com/map/doc/ref.php#GeometryOptions)\n\n**Events:**\n- `@add=\"Function(object)\"` - Fired when rectangle is added to map\n\n**Example:**\n```html\n\n\n\n \n \n \n\n```\n\n## Documentation\n\n- [Longdo Map API Documentation](https://map.longdo.com/docs/)\n- [สอนการใช้ Map API ร่วมกับ Vue.js](https://map.longdo.com/blog/2019/12/03/longdo-map-api-vue-js/)\n\n## Community\n\n- [Longdo Map API Community - แผนที่ออนไลน์ไทย](https://www.facebook.com/groups/708165893234850)\n","readmeFilename":"README.md"}
![\"Longdo](\"https://map.longdo.com/themes/longdo/logo.png\"){kind=logo}
\n \n![\"Facebook\"](\"https://img.shields.io/badge/Community-3894ee?logo=facebook\"){kind=icon}
![\"Version\"](\"https://img.shields.io/npm/v/longdo-map-vue?color=3894ee\")
\n ![\"Downloads\"](\"https://img.shields.io/npm/dt/longdo-map-vue?color=3894ee\")
\n ![\"License\"](\"https://img.shields.io/npm/l/longdo-map-vue?color=3894ee\")
\n