xkjyeah / vue-google-maps

Google maps component for vue with 2-way data binding
https://xkjyeah.github.io/vue-google-maps/
1.88k stars 474 forks source link

can't drag marker #237

Open c4rlosviteri opened 6 years ago

c4rlosviteri commented 6 years ago

Is there any library that blocks my marker?

package.json

    "bootstrap-vue": "^1.0.0-beta.9",
    "jade-loader": "^0.8.0",
    "lodash": "^4.17.4",
    "marker-clusterer-plus": "^2.1.4",
    "stylus-loader": "^3.0.1",
    "ubuntu-fontface": "^0.1.13",
    "vue": "^2.4.2",
    "vue-head": "^2.0.11",
    "vue-router": "^2.7.0",
    "vue-social-sharing": "^2.2.8",
    "vue-upload-component": "^2.6.0-beta.3",
    "vue2-datepicker": "^1.5.0",
    "vue2-google-maps": "^0.8.4",

main.js

import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
  load: {
    key: 'AIzaSyAMXUB8ni1QcONPB389iEiwTjPx6JrUxNA',
  }
})
Vue.component('google-map', VueGoogleMaps.Map);
Vue.component('google-marker', VueGoogleMaps.Marker);

form.vue

<template lang='jade'>
 google-map(:center='center', :zoom='7', style='width: 500px; height: 300px')
              google-marker(v-for='m in markers', :position='m.position', :clickable='true', :draggable='true', @dragend="getCoordinates")
</template>
<script>
export default {
  data () {
    return {
      center: {lat: 10.0, lng: 10.0},
      markers: [
        {
          position: {lat: 10.0, lng: 10.0}
        }, 
      ],
    }
  },
  methods: {
    getCoordinates: function(e) {
      console.log(e.latLng.lat() + ' ' + e.latLng.lng())
    }
  },
}
</script>
adamorlowskipoland commented 6 years ago

Title is 'can't drag marker' but you ask if you can block it. What do you need?

If you want to block marker from changing it position, change :draggable='true' to 'false'.