vue组件自定义标签_Vue 2 Google Map自定义标记组件

vue组件自定义标签

Vue 2 JS Google Map的自定义标记组件 (Custom marker component for vue 2 js google map)

This component let user 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 https://ngmap.github.io/ from this component https://github.com/allenhwkim/angularjs-google-maps/blob/master/directives/custom-marker.js

该组件使用户可以使用叠加层在地图上显示自定义html内容。 此组件是google map V3覆盖代码示例的改编版，其中包含来自angularjs google map https://ngmap.github.io/的一些很棒的想法，来自此组件https://github.com/allenhwkim/angularjs-google-maps/ blob / master / directives / custom-marker.js

如何 (How to)

Here is how to use this component

这是使用此组件的方法

• import the component and use it in your own vue map component

  导入组件并在您自己的vue map组件中使用

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

[...]

components: {
    'gmap-custom-marker': GmapCustomMarker
},

<gmap-custom-marker
  :key="marker.id + (selectedMarker.id === marker.id ? '-force-refresh' : 0)"
  v-for="marker in places"
  :marker="marker"
  :onClick="placeClick"
  class="">
  >
      <img src="http://lorempixel.com/800/600/nature/" />
      <my-component :place="marker"></my-component>
</gmap-custom-marker>

At the moment, the component api looks like :

目前，组件api如下所示：

• handles onClick callback and give as first argument the given prop :marker

  处理onClick回调并将给定的prop :marker作为第一个参数

methods: {
   placeClick (marker) {
       console.log('this marker was clicked', marker)
   }
}

• display places depending on their lng lat values

  根据其LNG纬度值显示地点

computed: {
   places () {
      return [
        {
          latitude: 50.60229509638775, 
          longitude: 3.0247059387528408 
        }
      ]
   }
}

• refresh management using vue key change (this is a kind of hack)

  使用Vue密钥更改进行刷新管理(这是一种技巧)

:key="marker.id + (marker.condition ? '-refresh-tag' : 0)"

翻译自: https://vuejsexamples.com/vue-2-google-map-custom-marker-component/

vue组件自定义标签