vue.js에 지도를 소개하는 방법

vue.js에 지도를 추가하는 방법: 1. Tiantu 공식 웹사이트에 들어가 키를 얻습니다. 2. 해당 src를 vue 프로젝트의 index.html에 추가합니다. 3. 새 map.js 파일을 만들고 참조합니다. Vue 페이지에 있습니다. 그게 다입니다.

이 기사의 운영 환경: windows10 시스템, vue 2.5.2, thinkpad t480 컴퓨터.

실제로 Vue 프로젝트에 지도를 도입하는 방법은 여러 가지가 있습니다. 예를 들어 하늘 지도와 vue-amap 조명 기능을 사용할 수 있으며 두 가지 방법 모두 각자의 필요에 따라 선택할 수 있습니다. 다음은 지도 방법에 대한 소개입니다.

구체적인 단계는 다음과 같습니다.

첫 번째 단계는 Tiantu 공식 웹사이트에 따라 자신만의 키(key)를 얻는 것입니다.

두 번째 단계는 vue 프로젝트의 index.html에 해당 src를 도입하는 것입니다.

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

세 번째 단계는 Tiantu를 쉽게 소개할 수 있도록 js 파일 Map.js를 만드는 것입니다. 이 파일은 쉽게 소개할 수 있는 곳에 배치할 수 있습니다. Map.js의 코드는 다음과 같습니다.

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

네 번째 단계는 사용된 vue 페이지에서 인용할 수 있습니다. 코드는 다음과 같습니다

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

추천 학습:php training

위 내용은 vue.js에 지도를 소개하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!