Vue Map - Add and Remove
To add routes at design-time, pass an array of objects to the routes property. A route requires only its locations to be specified. The locations will be connected and make up the route.
- <template>
- <DxMap
- :zoom="5"
- :routes="mapRoutes"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxMap } from 'devextreme-vue/map';
- export default {
- components: {
- DxMap
- },
- data() {
- return {
- mapRoutes: [{
- locations: [
- { lat: 40.782500, lng: -73.966111 },
- "40.755833, -73.986389",
- [ 40.753889, -73.981389 ],
- "Brooklyn Bridge,New York,NY"
- ]
- }]
- };
- }
- }
- </script>
To add or remove a route at runtime, bind the routes property of the Map to a component property.
- <template>
- <div>
- <DxMap
- :zoom="10"
- :routes="mapRoutes"
- />
- <DxButton
- text="Add the Route"
- @click="addRoute"
- />
- <DxButton
- text="Remove the Route"
- @click="removeRoute"
- />
- </div>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxMap } from 'devextreme-vue/map';
- import { DxButton } from 'devextreme-vue/button';
- export default {
- components: {
- DxMap,
- DxButton
- },
- data() {
- return {
- mapRoutes: [{
- locations: [
- { lat: 40.782500, lng: -73.966111 },
- "40.755833, -73.986389",
- [ 40.753889, -73.981389 ],
- "Brooklyn Bridge,New York,NY"
- ]
- }]
- };
- },
- methods: {
- addRoute() {
- this.mapRoutes.push({
- locations: [
- "40.753889, -73.981389",
- "Brooklyn Bridge,New York,NY"
- ]
- });
- },
- removeRoute() {
- this.mapRoutes.pop();
- }
- }
- }
- </script>
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.