How to introduce map in vue.js-Vue.js-php.cn

How to introduce map in vue.js

王林

Release： 2021-10-05 13:20:28

Original

3827 people have browsed it

How to introduce a map into vue.js: 1. Enter the Tiantu official website to get the key; 2. Introduce the corresponding src into index.html in the vue project; 3. Create a new map.js file, in Just reference it in the vue page.

How to introduce map in vue.js

The operating environment of this article: windows10 system, vue 2.5.2, thinkpad t480 computer.

There are actually many ways to introduce maps into vue projects. For example, we can use the functions of sky map and vue-amap light. Both methods have their own advantages. You can choose according to your own needs. Here is an introduction to the map method.

The specific method steps are as follows:

The first step is to get your own key (key) according to the Tiantu official website

The second step is to Introduce the corresponding src into index.html in your vue project.

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

Copy after login

The third step is to create a js file Map.js to facilitate the introduction of Tiantu. This file can be placed where you can easily introduce it. The code in Map.js is as follows

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

Copy after login

The fourth step can be quoted in the vue page used. The code is as follows

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

Copy after login

Recommended learning: php training

The above is the detailed content of How to introduce map in vue.js. For more information, please follow other related articles on the PHP Chinese website!