一、申请key

链接: http://lbs.tianditu.gov.cn/.
登陆网址，注册账号后点击控制台。

创建新应用，并填写好信息，就可以在应用管理表格里看到生成的key。我是pc端项目，应用类型选择了浏览器。

二、代码部分

1.静态引入

在index.html内引入，对应的key修改成自己申请的。


<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的key"></script>

2.创建容器

创建指定宽高的div容器，设置id：

<template><div><div id="divwxMap" class="divwxMap" style=" width: 100%;height: 100vh;"></div></div>
</template>

3.创建基础地图

代码如下：

 mounted() {this.initwxMap();},methods: {// 初始化天地图initwxMap() {// vue项目需要先声明 T = window.T，不然后面无法获取到。var T = window.T;this.wxMap = new T.Map('divwxMap'); // div的id// 传参中心点经纬度，以及放大程度，最小1，最大18this.wxMap.centerAndZoom(new T.LngLat(116.397829,39.907923), 17);},}

达成基本效果。

4.创建卫星图图层

继续在initwxMap() 方法内添加卫星图图层代码。

代码如下：


// 卫星图图层
const ctrl = new T.Control.MapType([{title: '卫星',icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',layer: window.TMAP_SATELLITE_MAP,},]);this.wxMap.addControl(ctrl);

达成效果

5.创建点位遮盖物

创建点位执行方法，个人是为了方便后面在点击事件内控制。

代码如下：


point() {var T = window.T;// 点位数据const site = [{ longitude: 116.404137, latitude: 39.917403, name: '陈独秀旧居' },{ longitude: 116.394396, latitude: 39.910754, name: '中山公园' },];site.forEach((item) => {// 创建标注对象const marker = new T.Marker(new T.LngLat(item.longitude, item.latitude),{icon: new T.Icon({iconUrl: pointJQ, // 引入自定义图标iconSize: new T.Point(100, 100), // 图标大小}),});// 向地图上添加标注this.wxMap.addOverLay(marker);// 点位的点击事件，展示弹窗this.addClickHandler(item, marker);});},

达成效果

6.点位弹窗展示

代码如下：

// 点位弹窗
addClickHandler(content, marker) {var T = window.T;const that = this;marker.addEventListener('click', function (e) {var markerInfoWin = new T.InfoWindow(); // 创建信息窗口对象// 弹窗模版const sContent =`<div class="module-title" style="color: #58FFF4;font-size:        24px;">${content.name}</div><div style="border-bottom: 1px solid #fff;width:100%;margin:15px 0px;"></div><div class="module-content" style="font-size: 20px;"><div>地址：xxxxxxx。</div><div>⾯积：xxxxx平方米</div></div>`;// 相对于点偏移的位置markerInfoWin.setContent(sContent, { offset: new T.Point(0, -30) });that.wxMap.openInfoWindow(markerInfoWin, e.lnglat); // 开启信息窗口});},

对于原本弹窗样式的处理：

<style lang="scss">
.tdt-infowindow  .tdt-zoom-animated{bottom: -7px!important;left: -171px!important;
}
.tdt-infowindow-close-button{margin: 10px;
}
.tdt-infowindow-content-wrapper{width: 400px;background-color: rgba(0,0,0,0.6);color: #fff;border: 1px solid #fff;border-top: 8px solid #fff;padding: 20px;
}
</style>

展示效果：

希望这个示例对大家有用

vue项目中使用天地图相关推荐

Vue项目中应用天地图
引入天地图 js 首先到天地图官网获取服务许可key:国家地理信息公共服务平台天地图全局引入地图 js 库在Vue项目的index.html 文件中,全局引入天地图js库 <body> ...
Vue项目中引入天地图
在Vue的静态资源目录下的index.html中引入天地图的底图天地图API: 在引入了Vue项目以后及将需要用到的功能从window对象下赋值给当前项目的Data; <script type= ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
在vue项目中：统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...

vue项目中使用天地图

天地图使用示例

一、申请key

二、代码部分

1.静态引入

2.创建容器

3.创建基础地图

4.创建卫星图图层

5.创建点位遮盖物

6.点位弹窗展示

vue项目中使用天地图相关推荐

最新文章

热门文章