Longdo Map component for Vue.js
You can easily install by using npm
npm i longdo-map-vue
First, you need to get a Longdo Map API key.
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:
This is a recommended way of registering component
In your main.js
or similar file:
import Vue from 'vue'
import LongdoMap from 'longdo-map-vue'
Vue.use(LongdoMap, {
load: {
apiKey: 'YOUR_LONGDO_MAP_API_KEY'
}
})
Then you can use <longdo-map/>
in your component template.
<template>
<longdo-map/>
</template>
In your component file, for example Foo.vue
:
<template>
<longdo-map/>
</template>
import { LongdoMap } from 'longdo-map-vue'
LongdoMap.init('YOUR_LONGDO_MAP_API_KEY')
export default {
name: 'Foo',
components: {
'longdo-map': LongdoMap
}
}
You can import more components if you want, for example:
import { LongdoMap, LongdoMapMarker } from 'longdo-map-vue'
Add a polygon to Longdo Map:
<template>
<longdo-map>
<longdo-map-polygon
:location="locationList"
:lineWidth="2"
:lineColor="'rgba(0, 0, 0, 1)'"
:fillColor="'rgba(255, 0, 0, 0.4)'"
/>
</longdo-map>
</template>
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:
<template>
<longdo-map :zoom="10" :lastView="false">
<longdo-map-marker
v-for="(item, i) in markers"
:key="i"
:location="item.location"
:title="item.title"
:detail="item.detail"
/>
</longdo-map>
</template>
- longdo-map props
- longdo-map-marker props
- longdo-map-dot props
- longdo-map-circle props
- longdo-map-rectangle props
- longdo-map-polyline props
- longdo-map-polycurve props
- longdo-map-polygon props
- Coming soon...