search

diegoazh / gmap-vue

A wrapper component for consuming Google Maps API built on top of Vue. Fork of the popular vue-google-maps plugin.
https://diegoazh.github.io/gmap-vue/
173 stars 51 forks source link

Bug: Add marker by GmapDrawingManager get fail message "shape.overlay.setEditable is not a function". #268

Closed azusa5526 closed 1 year ago

azusa5526 commented 2 years ago

Describe the bug

Add marker by GmapDrawingManager will get fail message "shape.overlay.setEditable is not a function". In this time click the map or draw another shape will get fail message "this.selectedShape.overlay.setEditable is not a function"

To reproduce

Steps to reproduce the behavior:

  1. Create a new vue project
  2. Add gmap-vue library by npm
  3. import GmapVue from 'gmap-vue' in main.js
  4. add Vue.use GmapVue... in main.js
  5. Copy HTML example from GmapDrawingManager Guide page in App.vue
  6. add markerOptions: { draggable: true, clickable: true } in App.vue data
  7. click "edit" btn
  8. click add marker btn in mapTools
  9. click a position in map to put marker
  10. See error

Expected behavior

After marker added, select shape & create with no error.

Current behavior

When add marker by GmapDrawingManager. The select function will be broken and give the fail messages.

Screenshots

clip

Desktop (please complete the following information)

Smartphone (please complete the following information)

Additional context

Create all type of shapes will calling the function ''setSelection". And I think maybe marker is not support 'editable' in google map javascript api but the other shapes like polygon, polyline support it. So, only create marker will trigger this error.

Versions

Package manager

Plugin version

davydnorris commented 2 years ago

OK I can see what's happening here and it's a bug. Markers are not like all the other shapes in that they can be dragged but not edited.

I am currently rewriting the whole Drawing Manager to be more of a wrapper for the Google component, because the current approach mutates the props passed in and alternatives are too hard to manage. This means the Drawing Manager will only be used for creating new shapes, and the responsibility for managing editing existing shapes will be up to the parent component.

I would encourage you to have a look at the implementation of the Drawing Manager and use the code to add your own editing of the shapes. Use the click event to select a shape and set edit and drag to true (except for Markers - just set drag), and then watch for events on the shape.

I am currently checking each shape because I think they also mutate their props and will need to be fixed, so watch for editing side effects

azusa5526 commented 2 years ago

Thanks for your reply. Due to the lack of time, I copy the Drawing Manager source from node_modules into my project and added the if statement directly to 'setSelection(shape)' & 'clearSelection()' in order to avoid markers calling the 'setEditable' function. Let me thank you one more time for replying to my message.

Best Regards, Andrew (azusa5526)

diegoazh commented 2 years ago

Related to #265

diegoazh commented 2 years ago

I will leave the issue on stand by until @davydnorris finish the PR for the mentioned feature above.

davydnorris commented 2 years ago

Use the workaround as you have done already until I fix all the shapes - but I'll fix it in an update for all shapes as there are some issues with them all

diegoazh commented 1 year ago

Migrate to the new version of the plugin for Vue v3