Vue2中使用天地图

关于天地图

当使用 Vue.js 开发 Web 应用程序时,使用地图服务是一种常见的需求,在 Vue.js 中使用天地图可以展示地理空间数据、实现地图交互和定位等功能。下面简单的介绍在 Vue.js 中使用天地图:

1. 申请天地图 API Key

首先在天地图官方网站上注册并申请自己的 API Key。通过 API Key,您可以在应用程序中访问天地图的服务和数据。 (天地图的官方地址有详细说明)

2. 引入天地图

  1. 在项目的public文件夹中的index.html文件引入天地图js文件
js 复制代码
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=9ad4913655ea60e6632f2c079fa24137" type="text/javascript"></script>
  1. 在vue文件中的template创建地图容器元素

    <div id="yzMap"></div>

  2. 在methods中放入初始化的方法

js 复制代码
    roadMap () {
      // vue项目需要先声明 T = window.T,不然后面无法获取到。
      var T = window.T;
      this.wxMap = new T.Map('yzMap'); // div的id
      // 传参中心点经纬度,以及放大程度,最小1,最大18
      this.wxMap.centerAndZoom(new T.LngLat(116.001930, 29.705057), 12);
     
      getList().then(res => {
      //从后端返回的坐标信息存入stie中
        const site = res.data.map(item => ({
          longitude: item.longitude,
          latitude: item.latitude,
          name: item.deptName,
          id: item.deptId
        }))
        
        //把坐标信息遍历到地图上生成对应的坐标
        site.forEach((item) => {
          var position = new T.LngLat(item.longitude, item.latitude)
          var icon = new T.Icon({
            iconUrl: require('./img/mark_bs.png'), //引入图标
            iconSize: new T.Point(15, 20), //图标可视区域的大小。
          });
          var label = new T.Label({
            text: item.name, //文本标注的内容
            position: position, //文本标注的地理位置
            offset: new T.Point(-100, -30) //文本标注的位置偏移值
          })
          
          // 创建标注对象
          var marker = new T.Marker(position, {
            icon: icon
          })
          label.setFontSize(10);
          label.setZindex(9999)
          label.hide()
          
          // 监听标注的鼠标移入事件
          marker.addEventListener("mouseover", function () {
            // 显示label
            label.show();
          });

          // 监听标注的鼠标移出事件
          marker.addEventListener("mouseout", function () {
            // 隐藏label
            label.hide();
          });
          this.wxMap.addOverLay(label);
          this.wxMap.addOverLay(marker);

          // // 点位的点击事件,展示弹窗
          this.addClickHandler(item, marker);
        })
      }).catch(res => {
        this.mapMarker = null
      })
    },
  // 坐标点位弹窗功能
    addClickHandler (content, marker) {
      var T = window.T;
      const that = this;
      marker.addEventListener('click', function (e) {
        that.clickArrayMarker(content)
      });
    }
  1. 在mounted中挂载,需要在外包裹一层setTimeout
js 复制代码
mounted () {
    setTimeout(() => {
       this.roadMap()
    }, 100);
}
  1. 最后写上地图的css样式
css 复制代码
#yzMap {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 9999;
}

//去掉天地图logo
::v-deep .tdt-control-container {
  display: none !important;
}
  1. 大功告成
相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站