Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/metamediatechnology/longdo-map-vue
Longdo Map component for Vue.js
https://github.com/metamediatechnology/longdo-map-vue
javascript longdo longdo-map longdo-map-vue map-api vue vue-component vue-components vuejs
Last synced: about 1 month ago
JSON representation
Longdo Map component for Vue.js
- Host: GitHub
- URL: https://github.com/metamediatechnology/longdo-map-vue
- Owner: MetamediaTechnology
- License: mit
- Created: 2019-09-29T12:38:51.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-08T11:08:22.000Z (3 months ago)
- Last Synced: 2024-11-25T10:44:31.073Z (about 2 months ago)
- Topics: javascript, longdo, longdo-map, longdo-map-vue, map-api, vue, vue-component, vue-components, vuejs
- Language: Vue
- Homepage: https://map.longdo.com
- Size: 826 KB
- Stars: 8
- Watchers: 6
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Longdo Map component for Vue.js
## Installation
You can easily install by using `npm`
```cli
npm i longdo-map-vue
```
## Usage
First, you need to get a [Longdo Map API key](https://map.longdo.com/console/). 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 { createApp } from 'vue'
import App from './App.vue'
import LongdoMap from 'longdo-map-vue'
createApp(App)
.use(LongdoMap, {
load: {
apiKey: 'YOUR_LONGDO_MAP_API_KEY',
}
})
.mount('#app')
```
Then you can use `` in your component template.
```html
```
### Register component locally
In your component file, for example `Foo.vue`:
```html
import { LongdoMapLoad, LongdoMap } from 'longdo-map-vue'
LongdoMapLoad({
apiKey: 'YOUR_LONGDO_MAP_API_KEY',
})
```
You can import more components if you want, for example:
```js
import { LongdoMapLoad, LongdoMap, LongdoMapMarker, LongdoMapPolyline } from 'longdo-map-vue'
```
## Examples
Add a polygon to Longdo Map:
```html
const 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
function loadMap(map) {
map.Layers.setBase(longdo.Layers.NORMAL)
}
function 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)
### 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
```
## Documentation
* [Longdo Map API Documentation](https://map.longdo.com/docs/)
* [สอนการใช้ 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)