vue项目中如何引入地图组件

vue项目中如何引入地图组件，下面web建站小编给大家详细介绍一下实现代码！

1、引入js及秘钥

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

2、新建Map.js

// 初始化地图
export default {
  init() {
    return new Promise((resolve, reject) => {
      if (window.T) {
        console.log('地图脚本初始化成功...')
        resolve(window.T)
        reject('error')
      }
    })
  }
}

3、vue页面中调用

<template>
  <div>
    <div id="bdmap" class="map"></div>
  </div>
</template>
<script>
import MapInit from "@/utils/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: 'TMAP_SATELLITE_MAP' };
        this.map = new T.Map('bdmap', 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%;
}
</style>

Vue Baidu Map百度地图API组件中文文档官网介绍

标签： 地图组件

上面是“vue项目中如何引入地图组件”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3035.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！