Implémentation de l'affichage de la carte dans Vue à l'aide du widget Carte de Kendo UI

Les cartes sont de plus en plus courantes dans les applications Web. Découvrez comment vous pouvez facilement ajouter une carte personnalisable à votre application Vue.js en seulement quelques étapes avec Kendo UI.

Le besoin de cartes a augmenté avec le temps dans les applications Web modernes. Qu'il s'agisse d'emplacements de rendu, d'adresses de bureaux, de centres commerciaux, de salles de sport, de conférences, etc., presque toutes les applications Web modernes disposent d'un affichage de carte rendu quelque part dans l'application pour une raison ou une autre. Étant donné le besoin croissant d'afficher des cartes, nous allons montrer comment implémenter un affichage de carte dans notre application Vue à l'aide du widget de carte Kendo UI .

Configurer un projet Vue

Tout d'abord, nous créer un projet Vue.js avec lequel nous pourrons démontrer la mise en oeuvre de notre planificateur de tâches. Sans plus attendre, ouvrez une fenêtre de terminal sur votre répertoire préféré et exécutez la commande ci-dessous:

 $ vue create map-demo

Si vous n'avez pas installé Vue CLI dans le monde, veuillez suivre ce guide et revenez ensuite à la suite de cette leçon.

Lorsque vous avez terminé de démarrer votre application Vue, Accédez au nouveau répertoire d'application Vue et démarrez le serveur de développement:

 $  cd  map-demo

[ npm  $ servir servir

Ceci servira votre application Vue sur localhost: 8080 . Accédez-y sur votre navigateur et vous verrez votre application Vue en direct:

Ajoutez Kendo UI to Votre projet

Ajoutons maintenant Kendo UI à notre nouveau projet Vue. Pour la portée de cette démonstration, nous aurons besoin de

1. Le paquet Kendo UI
       
2. Le paquet thématique par défaut de Kendo UI
       
3. L'emballage de carte Kendo UI pour Vue
       

Pour ce faire, ouvrez une fenêtre de terminal dans le répertoire racine du projet et exécutez les commandes ci-dessous:

 // Installez le paquet Kendo UI vue
[ npm   installer  --save @ progress / kendo-ui

// Installer un wrapper de carte Kendo UI  pour  vue
Installer  $  npm   --save @ progress / kendo-map-vue-wrapper

// Installer le paquet thématique par défaut de Kendo UI
$  npm   installer  --save @ progress / kendo-theme-default

4. Enfin, nous ajoutons les packages nécessaires de Kendo UI du service CDN. Ouvrez le fichier index.html du répertoire public et ajoutez cet extrait dans le tag :

 <   rel  = [19659026] " feuille de style "    href  =  " https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common .min.css  "  /> 
 < link   rel  = "  feuille de style  " 
 
 href  =  " https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css "   /> [19659039] < script   src  =  " https://code.jquery.com/jquery-1.12.4.min.js "    ]>  </  script > 
 < script   src  =  " https://kendo.cdn.telerik.com/ 2017.3.913 / js / kendo.all.min.js  " >  </  script > 
 < script   src  =  " https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6. 15 / browser-polyfill.min.js  " >  </  script > 
 < script   src  = [19659026] " https://unpkg.com/vue/dist/vue.min.js "  >  </  script > 


 < script   src  =  " https://unpkg.com/@progress/kendo-map-vue-wrapper/dist/cdn/kendo-map-vue-wrapper .js  " >  </  script > 

Créez le composant de carte

Maintenant que nous disposons de tous les packages Kendo UI dont nous avons besoin pour notre planificateur app, allons de l'avant et modifions notre application Vue pour rendre l'affichage de la carte. Pour ce faire, ouvrez le dossier src / components / . Vous devriez trouver un fichier existant HelloWorld.vue . Renommez le fichier en Map.vue et mettez-le à jour avec le code ci-dessous:

 <!  -  src  /  composants  /  Carte .  vue  - > 
 < modèle > 

 < div  classe  = [19659083] "bonjour" > 

 < h1 >  { { msg } }  < /  h1 > 

 < div  class  =  "carte" > 

 < div  class  class  = [19659083] "card-header" >  Carte de Kendo Vue  < /  div > 

 < div  class  = [19659083] "card-body" > 

 < kendo  -  carte :  centre  =  "[30.268107, -97.744821]" 

. :  zoom  =  "5"  style  = [19659083] "largeur: 100%; height: 500px; "> 

 < kendo  -  carte  -  couche

:  type  =  "'tile'" 

: url-  template  =  "'https: // # = sous-domaine # .tile. openstreetmap.org/#= zoom # / # = x # / # = y # .png '"

:  sous-domaines  = " ['a', 'b', 'c'] "

:  attribution  =  "' &  copie ;   < a href  =  ' https :  / [19659077] /  osm .  org  /  copyright  '> 

OpenStreetMap contributors  < /  a >  '"

>  < /  kendo  -  carte  -  couche  - 

 < kendo  -  ] carte  -  marqueur :  position  =  "[30.268107, -97.744821]" >  < /  kendo  -  carte  -  marqueur > 

 < kendo  -  carte  -  marqueur :  repère . ] =  "[32, -97.744821]" >  < /  kendo  -  carte  -  marqueur > 

 <  kendo  -  carte  -  marqueur :  localisation  =  "[34, -97.744821]" >  < ] /  kendo  -  carte  -  marqueur > 

 < /  kendo  -  carte






 Le meilleur outil 2023 pour ta croissance Instagram ! 



  




   


Source link 
Partager :
Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)