Maison  >  Article  >  interface Web  >  Comment introduire la carte dans vue.js

Comment introduire la carte dans vue.js

王林
王林original
2021-09-30 16:39:113878parcourir

Comment introduire une carte dans vue.js : 1. Entrez sur le site officiel de Tiantu pour obtenir la clé ; 2. Introduisez le src correspondant dans index.html dans le projet vue ; dans la page de vue. C'est tout.

Comment introduire la carte dans vue.js

L'environnement d'exploitation de cet article : système windows10, vue 2.5.2, ordinateur thinkpad t480.

Il existe en fait de nombreuses façons d'introduire des cartes dans les projets vue. Par exemple, nous pouvons utiliser les fonctions sky map et vue-amap light. Vous pouvez choisir en fonction de vos propres besoins. Voici une introduction à la méthode cartographique.

Les étapes spécifiques sont les suivantes :

La première étape consiste à obtenir votre propre clé (clé) selon le site officiel de Tiantu

La deuxième étape consiste à introduire le src correspondant dans index.html dans votre projet vue .

<script src="//api.tianditu.gov.cn/api?v=4.0&tk=396a532e3cc05a260931d1b308636316"></script>

La troisième étape consiste à créer un fichier js Map.js pour faciliter l'introduction de Tiantu. Ce fichier peut être placé là où vous pouvez facilement l'introduire. Le code dans Map.js est le suivant

// 初始化地图
export default {
  init() {
    return new Promise((resolve, reject) => {
      // 如果已加载直接返回
      if (window.T) {
        console.log(&#39;地图脚本初始化成功...&#39;)
        resolve(window.T)
        reject(&#39;error&#39;)
      }
    })
  }
}

La quatrième étape peut être citée dans la page de vue utilisée. Le code est le suivant

<template>
    <div class="home">
        <div id="bdmap" class="map" style ="position:absolute;bottom:0px;top:0px;width:100%"></div>
    </div>
</template>
<script>
import MapInit from "@/components/Map.js"

export default {
    data(){
        return{
            map: null,
        }
    },
    created(){
        this.init()
    },
    methods:{
        init(){
            MapInit.init().then(
            T => {
                this.T = T;
                const imageURL = "http://t0.tianditu.gov.cn/img_c/wmts?tk=您的密钥";
                const lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
                const config = { layers: [lay], name: &#39;TMAP_SATELLITE_MAP&#39; };
                this.map = new T.Map(&#39;bdmap&#39;, config);
                const ctrl = new T.Control.MapType();
                this.map.addControl(ctrl);
                this.map.centerAndZoom(new T.LngLat(118.62, 28.75), 16)
                this.map.addEventListener("zoomend", () => {
                console.log(lay.Pe)
            });
            }).catch()
            // 监听缩放级别(缩放后的级别)
            
        }
    }
}
</script>
<style>
.map{
    width: 100vw;
    height: 100%;
    position: absolute;
}
</style>

Apprentissage recommandé :formation php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn