Fermer

juillet 15, 2019

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

VueL_870x220


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:

 bienvenue-à-votre-vue-app "title =" bienvenue-à-votre-vue-application "/></p data-recalc-dims=

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
  1. 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



Source link