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

最新推荐文章于 2025-12-23 05:36:02 发布

翻译最新推荐文章于 2025-12-23 05:36:02 发布 · 676 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://vuejsexamples.com/vue-2-google-map-custom-marker-component/

本文介绍了一个Vue 2组件，该组件允许用户使用Overlay在Google Map上显示自定义HTML内容。组件受到angularjs google map的启发，并提供了处理onClick回调和根据lng lat值显示地点的功能。

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组件自定义标签

标签

#vue #git #react #github #js