search

inocan-group / vue3-google-map

A set of composable components for easy use of Google Maps in your Vue 3 projects.
https://vue3-google-map.com
MIT License
295 stars 60 forks source link

Optimize CustomMarkerClass draw Method #281

Open radiantstatic opened 2 months ago

radiantstatic commented 2 months ago

Context on the issue: https://github.com/inocan-group/vue3-google-map/issues/90 and https://github.com/inocan-group/vue3-google-map/issues/162

Changes:

Forced redraw is a result of the following causing significant lag while zooming:

const height = this.element.offsetHeight;
const width = this.element.offsetWidth;

Instead of getting the width and height of a given element, we can use CSS transforms to position marker based on its already calculated width. When using position: absolute; top: x, left: x - we can also assume that the item is being positioned in the bottom right corner of a given marker (thus making repositioning easier).

If we want to continue to use the offsetX and offsetY optional configuration, just add it to point.x and point.y instead.

Result: I've only been able to test locally, but I more or less have completely removed the lag associated with zooming on 500+ CustomMarkers. Looking for someone to help me validate.

radiantstatic commented 1 month ago

@HusamElbashir - Is this something you could take a look at? I know a lot of consumers of this would benefit greatly. Thanks!

HusamElbashir commented 1 month ago

Hey @radiantstatic thanks for the contribution. This definitely looks useful. Apologies though I just have so much going on at work and in my personal life atm that I didn't get a chance to look at it. Hoping to get to it soon though

radiantstatic commented 1 month ago

@HusamElbashir - Just wanted to follow up, trying to make a decision as to whether or not to fork this project. If you have some time to review over the next few days, let me know!