vue2-gmap-custom-marker

vue 2 google map custom marker component

Github星跟踪图

vue2-gmap-custom-marker


npm
npm

vue2

This component allows you to display custom HTML content on the map using Overlay.
This component is an adaptation of the Google Map V3 overlay code sample with some great ideas from angularjs google map from this component.

This project is a plugin for vue-google-maps.

Demo

Demo from gh-pages branch

Features

  • Display reactive custom html into markers on google map using slot system

  • Live property change allows simple interaction with coordonates and zindex of html marker element

  • Google map clustering support (see demo for exemple)

  • Simple positionning system for marker around the origin point

  • Specific markers offset X and Y for more control about html element display

  • Almost all API of the component is optional, just start with lon, lat property

  • Work (around) with nuxt with this trick

Example

custom markers on vue google map

Installation

Install the package from npm:

npm i vue2-gmap-custom-marker

Basic Usage

Import the component and use it in the components object.

import GmapCustomMarker from 'vue2-gmap-custom-marker';

export default = {
  [...],
  components: {
      'gmap-custom-marker': GmapCustomMarker
  },
  [...]
}

Use the custom marker inside the map component. Add HTML or other Vue components inside the custom marker to be rendered on the map.

<GmapMap>
  <gmap-custom-marker :marker="marker">
    <img src="http://lorempixel.com/800/600/nature/" />
    <my-component></my-component>
  </gmap-custom-marker>
</GmapMap>

<script>
export default = {
  [...],
  data() {
    return {
      marker: {
        lat: 50.60229509638775,
        lng: 3.0247059387528408
      }
    }
  [...]
}
</script>

Use the @click event with the .native modifier to bind a function to the clicking of the custom marker.

<GmapMap>
  <gmap-custom-marker
    :marker="{ lat: 50.60229509638775, lng: 3.0247059387528408 }"
    @click.native="someFunction"
  >
    <img src="http://lorempixel.com/800/600/nature/" />
    <my-component></my-component>
  </gmap-custom-marker>
</GmapMap>

Specify the alignment of the marker with the alignment prop. Accepts 13 values: top, bottom, left, right, center, topleft, lefttop, topright, righttop, bottomleft, leftbottom, bottomright, rightbottom. Defines the alignment of the marker relative to the lat/lng specified, e.g. bottomright - the marker will be below and on the right of the location.

<gmap-custom-marker
 :marker="marker"
 alignment="bottomright"
>
</gmap-custom-marker>

custom markers on vue google map

Manually specify an offset value for the marker in pixels with prop offsetX, offsetY. A positive offsetX moves the marker further right, and a positive offsetY moves the marker further down the page. Can be used with the alignment prop.

<gmap-custom-marker
 :marker="marker"
 :offsetX="-10"
 :offsetY="17.5"
>
</gmap-custom-marker>

Clusters

This component supports cluster markers and works like normal vue gmap clusters (since v5.4.3)

You can use cluster marker folowing the guide below:

  • Install marker-clusterer-plus : npm i --save marker-clusterer-plus

  • Use plugin cluster in you main.js or so (where vue and plugins are initialized)

// Using Cluster requires marker-clusterer-plus to be installed.
import GmapCluster from "vue2-google-maps/dist/components/cluster";

// Note: the name "cluster" below is the one to use in the template tags
Vue.component("cluster", GmapCluster);
  • Wrap your custom markers in the gmap component
<vue-gmap :center="markerCenter" :zoom="10" style="width: 100%" @click="onMapClick">
    <cluster>
        <gmap-custom-marker :marker="marker">
            <img src="https://vuejs.org/images/logo.png" />
        </gmap-custom-marker>
    </cluster>
<vue-gmap>

All markers into the cluster tag will be managed as a cluster automatically. That's all.

Reference

Prop, Type, Default, Description, Supported Values
:-----:, :-----:, :-----:, :-----:, :-----:
marker, Object, null, Provide the latitude and longitude values that the marker should be displayed at. Required, Provide an Object with lat and lng properties. { lat: Number, lng: Number }
offsetX, Number, 0, The number of pixels to move the marker by in the x-direction. Postive values move the marker to the right, Positive or negative number.
offsetY, Number, 0, The number of pixels to move the marker by in the y-direction. Postive values move the marker to down the page., Positive or negative number.
alignment, String, top, The alignment of the marker element relative to the location it is displayed. e.g. bottomright - the marker will be below and on the right of the location., top, bottom, left, right, center, topleft lefttop, topright, righttop, bottomleft, leftbottom, bottomright, rightbottom
zIndex, Number, 50, z-index of the marker., Positive number.

Licence

MIT

主要指标

概览
名称与所有者eregnier/vue2-gmap-custom-marker
主编程语言Vue
编程语言Vue (语言数: 2)
平台
许可证MIT License
所有者活动
创建于2018-02-05 14:38:52
推送于2024-10-24 21:46:58
最后一次提交2022-09-07 23:21:25
发布数2
最新版本名称5.6.3 (发布于 2022-11-04 10:54:15)
第一版名称5.6.2 (发布于 2020-11-12 23:40:48)
用户参与
星数136
关注者数3
派生数27
提交数106
已启用问题?
问题数46
打开的问题数0
拉请求数13
打开的拉请求数1
关闭的拉请求数2
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?