So führen Sie eine Karte in vue.js ein

So fügen Sie eine Karte in vue.js ein: 1. Rufen Sie die offizielle Website von Tiantu auf, um den Schlüssel zu erhalten. 2. Fügen Sie den entsprechenden src in index.html im vue-Projekt ein es auf der Vue-Seite Das ist es.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue 2.5.2, Thinkpad T480-Computer.

Es gibt tatsächlich viele Möglichkeiten, Karten in Vue-Projekte einzuführen. Beispielsweise können wir die Sky-Map- und Vue-Amap-Light-Funktionen verwenden. Hier finden Sie eine Einführung in die Kartenmethode.

Die spezifischen Schritte sind wie folgt:

Der erste Schritt besteht darin, Ihren eigenen Schlüssel (Schlüssel) gemäß der offiziellen Tiantu-Website zu erhalten.

Der zweite Schritt besteht darin, den entsprechenden src in index.html in Ihrem Vue-Projekt einzuführen.

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

Der dritte Schritt besteht darin, eine js-Datei Map.js zu erstellen, um die Einführung von Tiantu zu erleichtern. Diese Datei kann dort abgelegt werden, wo Sie sie einfach einführen können. Der Code in Map.js lautet wie folgt:

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

Der vierte Schritt kann auf der verwendeten Vue-Seite zitiert werden. Der Code lautet wie folgt

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

Empfohlenes Lernen:php-Schulung

Das obige ist der detaillierte Inhalt vonSo führen Sie eine Karte in vue.js ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!