腾讯地图js版本和gljs版本使用瓦片地图

最新推荐文章于 2024-09-27 15:27:45 发布

李蘑菇的小威

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量176

点赞数 3

分类专栏：地图文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/zhazhawei9527/article/details/142495919

版权

地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目需要使用腾讯地图展示瓦片地图，今天记录一下，项目刚开始引用的是js版本的地图，按照官方文档修改后竟然没有变化，而且还报错了，头大，出去一根烟的时间，回来自己就可以展示了，这就上升到灵异事件了，不过还好最后展示出来了，不晓得什么原因导致第一次会有一些延迟，后面一直没有遇到相似的问题，很奇怪，如果有大佬晓得踢小弟一脚

vue 项目需要在index.html里面引入相对应的js

js版本

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

gljs版本

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

两个版本应用一个就可以了，下面是相对应的使用瓦片操作

<template>
  <div class="doMap">
    <div id="mapDiv" ref="mapDiv"></div>
  </div>
</template>

<script>
export default {
  name: 'doMap',
  data() {
    return {
      map: '',
    }
  },
  mounted() {
    // 初始化地图
    this.initMap()
  },

  methods: {
    // 初始化地图
    initMap() {

      // js版本瓦片
      /******  js版本瓦片 start  ******/
      // 配置瓦片信息
      var earthlayer = new qq.maps.ImageMapType({
        tileSize: new qq.maps.Size(256, 256),
        minZoom: 10,
        maxZoom: 21,
        opacity: 0.5,
        getTileUrl: function (tile, zoom) {
          var z = zoom,
            x = tile.x,
            y = tile.y;
          return '远程图片地址/' + z + '/' + x + '_' + y + '.png';
        }
      });

      this.map = new qq.maps.Map(this.$refs.mapDiv, {
        center: new qq.maps.LatLng(39.916527, 116.397128), // 设置地图中心点坐标
        zoom: 13, // 设置地图缩放级别
        viewMode: '2D',
      })

      this.map.overlayMapTypes.push(earthlayer);

      /******  js版本瓦片 end  ******/


      /******  gljs版本瓦片 start  ******/

      // this.map = new TMap.Map(this.$refs.mapDiv, {
      //   center: new TMap.LatLng(this.centerPoi.lat, this.centerPoi.lng), // 设置地图中心点坐标,//设置地图中心点坐标
      //   zoom: zoom,   //设置地图缩放级别
      //   viewMode: '2D',
      // });
      // //初始化imageTileLayer  ，配置瓦片信息
      // new TMap.ImageTileLayer({
      //   getTileUrl: function (x, y, z) {
      //     //拼接瓦片URL
      //     var url = '远程图片地址/' + z + '/' + x + '_' + y + '.png';
      //     return url;
      //   },
      //   minZoom: 10,    //显示自定义瓦片的最小级别
      //   maxZoom: 21,    //显示自定义瓦片的最大级别
      //   visible: true,  //是否可见
      //   opacity: 0.95,   //图层透明度：1不透明，0为全透明
      //   map: this.map,       //设置图层显示到哪个地图实例中
      // });

      /******  gljs版本瓦片 end  ******/

    },
  }
}
</script>

<style lang="scss" scoped>
.doMap{
  width: 500px;
  height: 500px;
}
</style>