Блог

Главная - Вопросы по программированию - Как вызвать компонент vuetify в маркере листовки?

Как вызвать компонент vuetify в маркере листовки?

#javascript #vue.js #leaflet #vuetify.js

#javascript #vue.js #листовка #vuetify.js

Вопрос:

Я пытаюсь открыть v-dialog при нажатии на маркер, но я не знаю, как я могу это сделать.

Я уже пытаюсь создать метод в скрипте vue, но я не знаю, как открыть его таким образом, и я не могу вызвать этот метод. Я также пытался напрямую создать экземпляр, но у меня не получилось.

Javascript

 for(var i = 0; i < coord.total; i  ){
              L.marker([lat,long], {title: name}).addTo(mymap).on('click', function(e) {
                //Open the v-dialog
              });
            }

Vue

 <v-dialog v-model="dialog" width="600px">
  <v-btn slot="activator" flat color="blue darken-3">
    <v-icon right>info</v-icon>
  </v-btn>
  //Some stuff

<script>
export default {
  name: 'Detail',
  data() {
    return {
      dialog: false
    }
  },
  props: {
     equip: Object,
  }
}
</script>

Спасибо за помощь

Комментарии:

1. Если я хорошо понимаю, что вы хотите сделать, это динамически внедрить компонент. Я никогда этого не делаю, но эта ссылка : css-tricks.com / … следует объяснить, как выполнить трюк

Ответ №1:

С пакетом «vue2-leaflet» это довольно просто. Вот пример компонента:

 <template>
  <v-container fluid fill-height class="ma-0 pa-0">

    <v-dialog v-model="dialog" max-width="290">
      <v-card>
        <v-card-title class="headline">A Dialog Box attached to a Marker :-)</v-card-title> 
        <v-card-actions>  
          <v-btn color="primary" @click="dialog = false">Close</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-img height="100%" width="100%">
      <l-map ref="map" id="karte" :zoom="zoom" :center="center">
        <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
        <l-marker :lat-lng="marker"  @click="dialog = true"></l-marker>
      </l-map>
    </v-img>

  </v-container>
</template>

<script>
import L from 'leaflet';
import { LMap,LMarker, LTileLayer} from 'vue2-leaflet';
import 'leaflet/dist/leaflet.css'

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

export default {
    components: { LMap,  LTileLayer, LMarker},
    data() {
      return {
        zoom:16,
        center: L.latLng(48.13,11.6),
        marker: L.latLng(48.13,11.6),
        dialog: false
      }
    }
};
</script>