Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/metamediatechnology/longdo-map-v3-vue
Longdo Map (API v3) component for Vue.js
https://github.com/metamediatechnology/longdo-map-v3-vue
Last synced: about 2 months ago
JSON representation
Longdo Map (API v3) component for Vue.js
- Host: GitHub
- URL: https://github.com/metamediatechnology/longdo-map-v3-vue
- Owner: MetamediaTechnology
- License: mit
- Created: 2022-08-09T03:57:49.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-08-29T08:16:38.000Z (over 2 years ago)
- Last Synced: 2024-12-01T13:28:54.671Z (about 2 months ago)
- Language: JavaScript
- Size: 238 KB
- Stars: 0
- Watchers: 8
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# longdo-map-v3-vue
Longdo Map (API v3) component for Vue.js
## Table of Contents
- [Getting Started](#getting-started)
- [Requirement](#requirement)
- [Installation](#installation)
- [Usage](#usage)
- [Examples](#examples)
- [Components](#components)
- [Documentation](#documentation)
- [Community](#community)
- [References](#references)
## Getting Started
### Requirement
- [Vue](https://vuejs.org/)
> The current version of Longdo Map Vue does not support Vue 3.
### Installation
You can easily install by using `npm`
```cli
npm i longdo-map-v3-vue
```
### Usage
First, you need to get a [Longdo Map API key](https://map.longdo.com/docs/javascript/getapi).
Then, after you have Longdo Map API key and component installed, you need to register it to your Vue project.
There are two ways of registering component:
#### Register component globally
This is a recommended way of registering component
In your `main.js` or similar file:
```js
import Vue from 'vue'
import LongdoMap from 'longdo-map-v3-vue'
Vue.use(LongdoMap, {
load: {
apiKey: 'YOUR_LONGDO_MAP_API_KEY'
}
})
```
Then you can use `` in your component template.
```html
```
#### Register locally in your component
In your component file, for example `Foo.vue`:
```html
```
```js
import { LongdoMap } from 'longdo-map-v3-vue'
LongdoMap.init({ apiKey: 'YOUR_LONGDO_MAP_API_KEY' })
export default {
name: 'Foo',
components: {
LongdoMap
}
}
```
You can import more components if you want, for example:
`import { LongdoMap, LongdoMapMarker } from 'longdo-map-v3-vue'`
## Examples
Add a polygon to Longdo Map:
```html
```
```js
export default {
data() {
return {
locationList: [
{ lon: 99, lat: 14 },
{ lon: 100, lat: 13 },
{ lon: 102, lat: 13 },
{ lon: 103, lat: 14 }
]
}
}
}
```
Add multiple markers to Longdo Map:
```html
```
Using Longdo Map object:
```html
```
```js
export default {
methods: {
loadMap (map) {
map.Layers.setBase(longdo.Layers.NORMAL)
},
addMarker (marker) {
console.log(marker.location())
}
}
}
```
## Components
* [longdo-map](#map)
* [longdo-map-marker](#overlay)
* [longdo-map-dot](#geometry)
* [longdo-map-circle](#geometry)
* [longdo-map-rectangle](#geometry)
* [longdo-map-polyline](#geometry)
* [longdo-map-polycurve](#geometry)
* [longdo-map-polygon](#geometry)
* [longdo-map-menu-bar](#menu-bar)
* [longdo-map-custom-control](#custom-control)
* [longdo-map-custom-ui](#custom-ui)
### Map
- [Props](http://api.longdo.com/map/doc/ref.php#MapOptions)
- Event: `@load="Function(object)"`
```html
```
### Overlay
- [Props](http://api.longdo.com/map/doc/ref.php#MarkerOptions)
- Event: `@add="Function(object)"`
```html
```
### Geometry
`longdo-map-dot`, `longdo-map-circle`, `longdo-map-rectangle`,
`longdo-map-polyline`, `longdo-map-polycurve`, `longdo-map-polygon`
- [Props](http://api.longdo.com/map/doc/ref.php#GeometryOptions)
- Event: `@add="Function(object)"`
```html
```
### Menu Bar
- [Props](http://api.longdo.com/map/doc/ref.php#MenuBarOptions)
- Event: `@add="Function(object)"`
- Event: `@change="Function(currentMenuItem: Object, lastMenuItem: Object)"`
```html
```
*** support button type only
### Custom Control
- [Props](http://api.longdo.com/map/doc/ref.php#CustomControlOptions)
- Event: `@add="Function(object)"`
```html
```
### Custom UI
- Props: `vertical`, `horizontal` ('top', 'right', 'bottom', 'left', 'center')
```html
Longdo Map
```
## Documentation
* [สอนการใช้ Map API ร่วมกับ Vue.js](https://map.longdo.com/blog/2019/12/03/longdo-map-api-vue-js/)
## Community
* [Longdo Map API Community - แผนที่ออนไลน์ไทย](https://www.facebook.com/groups/708165893234850)
## References
* [Longdo Map](https://map.longdo.com/products)
* [Longdo Map API Documentation](https://map.longdo.com/docs/)