Comment introduire la carte dans vue.js

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.

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('地图脚本初始化成功...')
        resolve(window.T)
        reject('error')
      }
    })
  }
}

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!