Vue Map - Add and Remove
To add markers at design-time, pass an array of objects to the markers property. A marker requires only its location to be specified.
- <template>
- <DxMap
- :zoom="5"
- :markers="mapMarkers"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxMap } from 'devextreme-vue/map';
- export default {
- components: {
- DxMap
- },
- data() {
- return {
- mapMarkers: [
- { location: "40.749825, -73.090443" },
- { location: "42.743244, -71.594375" },
- { location: "37.058435, -74.903842" }
- ]
- };
- }
- }
- </script>
To add or remove a marker at runtime, bind the markers property of the Map to a component property:
- <template>
- <div>
- <DxMap
- :zoom="10"
- :markers="mapMarkers"
- @click="addMarker"
- />
- <DxButton
- text="Remove the Last Marker"
- @click="removeMarker"
- />
- </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 {
- mapMarkers: [
- { location: "40.749825, -73.090443" },
- { location: "42.743244, -71.594375" }
- ]
- };
- },
- methods: {
- addMarker(e) {
- this.mapMarkers.push({ location: e.location });
- },
- removeMarker() {
- this.mapMarkers.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.