This code works with default markers but custom ones seems not to refresh, it's maybe because I'm using Nuxt. Hello! I'm using custom markers and I'm trying to refresh the position every X seconds, currently I've faked it with a timeOut like this: this can optimize render time, but can break layout Top, bottom, left, right, center, topleft lefttop, topright, righttop, bottomleft, leftbottom, bottomright, rightbottom bottomright - the marker will be below and on the right of the location. The alignment of the marker element relative to the location it is displayed. Postive values move the marker to down the page. The number of pixels to move the marker by in the y-direction. Postive values move the marker to the right The number of pixels to move the marker by in the x-direction. Provide an Object with lat and lng properties. Provide the latitude and longitude values that the marker should be displayed at. No problem eh, actually, not too much of a problem. Import the component and use it in the components object.Īll markers into the cluster tag will be managed as a cluster automatically. You may find clicks too intentional to give a smooth user experience, so you turn to capturing mouse move events. Npm i vue2-gmap-custom-marker Basic Usage Specific markers offset X and Y for more control about html element displayĪlmost all API of the component is optional, just start with lon, lat property Simple positionning system for marker around the origin point Google map clustering support (see demo for exemple) Live property change allows simple interaction with coordonates and zindex of html marker element Featuresĭisplay reactive custom html into markers on google map using slot system You might look at this demo code repository for features usage and complete exemple around this plugin. In case you have troubles with this, just create the same folder with the images from the link above in public foler of your vue project (or served in /images/m1.png for exemples depending on you webserver configuration.) Demo For this plugin website demo, I had to create this folder that contains clusters images the clusters uses in vue-gmap. You might force the 5.6.2 version in your package.json for this plugin to keep compatibility until you want to switch to gmap-vue.įor those that use clusters with this plugin, the new release might break things. read this for more information about this.įor legacy projects using vue-google-maps, you have to stick to this projects tag 5.6.2. The demo for this project started using this project on. Now this project seems no more maintained and a maintained fork has started, As this is a fork, this plugin should work on it seeminglessly. This project is originally a plugin for vue-google-maps. This component is an adaptation of the Google Map V3 overlay code sample with some great ideas from angularjs google map from this component. The map is now listed in the Places panel, and can be saved to a KML file with other Google Earth project data you have created.This component allows you to display custom HTML content on the map using Overlay. If you press the Shift key when selecting this marker, the image is scaled from the center.Ĭlick OK when you are finished. Use any of the corner or side anchors to stretch or skew the selected corner or side. Use the triangle marker at the left to rotate the image for better placement. Use the center crosshair marker to move the image overlay on the globe and position it in the right location. Use the park boundaries to help you align the park boundaries on the map with the boundaries in Google Earth. Move the Transparency slider to the left to make the image a little transparent, which will assist you in placing the image in the correct location. In this example, we will use the following URL from the Internet: In this example, we typed "Glacier National Park Map".Ĭopy and paste the link below into the Link field, or click "Browse." and find an image to add from your local hard drive. In the New Image Overlay dialog box, type in a name for the image overlay in the Name field. A New Image Overlay dialog box appears, and a green outline is placed on the Earth. Click the Add Image Overlay button to add a new image overlay.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |