1、申请key

天地图地图服务对所有用户开放。使用本组服务之前，需要申请Key

2、引入API

地图API是由JavaScript语言编写的，您在使用之前需要通过<script>标签将API引用到页面中：

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

在vue项目中，我们在public文件夹的index.html中引入天地图的api文件

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><script defer src="//static.gdzwfw.gov.cn/mhyy/browser-upgrade/index.js"></script><script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的key"></script></head><body><noscript><strong>We're sorry but aba-init-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="root"></div></body>
</html>

3、在vue页面中，创建一个tiandiMap.vue页面，初始化地图，代码如下：

<template><div><div id="divwxMap" class="divwxMap" style="width: 100%;height: 580px;"></div><div style="margin-top:10px;width:100%"><label for="">选中的地址：</label><gd-inputstyle="width:88%"v-model="address"></gd-input></div></div>
</template><script type="text/javascript">import { mapActions } from 'vuex';export default {components: {},data () {return {wxMap: '',address: '',markerTool: '',addrResult: {},};},mounted () {this.initwxMap();},methods: {...mapActions(['getGeocoder',]),// 初始化天地图initwxMap () {// vue项目需要先声明 T = window.Tlet T = window.T;this.wxMap = new T.Map('divwxMap'); // div的id// 传参中心点经纬度，以及放大程度，最小1，最大18this.wxMap.centerAndZoom(new T.LngLat(113.86942, 35.30416), 18);var cp = new T.CoordinatePickup(this.wxMap, { callback: this.getLngLat });cp.addEvent();},getLngLat (lnglat) {let T = window.T;console.log('获取的经纬度');const x = lnglat.lng.toFixed(6);const y = lnglat.lat.toFixed(6);this.wxMap.clearOverLays(); // 清空原来的标注点let point = new T.LngLat(x, y);let marker = new T.Marker(point);this.wxMap.addOverLay(marker); // 添加标注点this.getGeocoderFun(x, y);},// 根据经纬度获取地址async getGeocoderFun (lon, lat) {this.$loading.show('查询中...');const query = {postStr: {lon,lat,ver: '1',},type: 'geocode',tk: '7b733691924fcd55d8724722172a0664',};try {const res = await this.getGeocoder({ query });this.$loading.hide();if (res.status === '0') {const result = res.result;this.address = result.formatted_address;this.addrResult = result;}}catch (e) {this.$loading.hide();}},getAddress () {return this.addrResult;},},};
</script><style lang="stylus" scoped>
</style>

效果：

在vue项目引入天地图，根据经纬度获取具体地址相关推荐

VUE项目引入微信JSSDK 实现微信自定义分享
VUE项目引入微信JSSDK 实现自定义分享前端vue.后端php 问题:后端获取config参数所需的url 需要和请求自定义分享页面url一致一.微信公众号后台添加 js安全域名(白名单) 二 ...
vue项目引入CNZZ数据专家（方法汇总篇）
vue项目引入CNZZ数据专家(方法汇总篇) 很多网站都有cnzz数据统计,用于分析网站页面受访情况. 今天就来备注一下开发经验: vue如何集成cnzz数据专家进行受访记录? 友盟+CNZZ官方文档 ...
vue项目引入typescript（vue与ts混用）
说明为什么要在vue项目中使用ts? 新公司给了一个关于vue项目的需求,又由于ts是JavaScript的超集,强类型数据,组件化友好.故我选择在vue项目中引入ts. 下载typescript和 ...
vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置引入assets中的图标路径 (7)页 ...
随笔-vue项目引入axios
随笔-vue项目引入axios 本文参考链接: 一安装axios依赖 npm install axios 二引入axios 在main.js中引入,注意与很多第三方模块不同的是,axios不能使用 ...
vue项目引入不符合ES6模块化标准的JS文件
vue项目引入不符合ES6模块化标准的JS文件实现方式实现原理实现方式要引入的文件放在public目录下,在index.html中通过script标签引入实现原理参考vue官网–处理静态资 ...
Vue项目引入Echarts可视化图表库教程踩坑
Apache ECharts是一个基于 JavaScript 的开源可视化图表库,ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ...
vue项目html引入css,vue项目引入自定义.css的样式文件
ES6的引入方式: .vue文件中 css文件引入 @import "../assets/common/common.css";//自定义.css的样式路径 js文件的引入在ma ...
vue项目引入标签云动画js函数，不执行
vue项目引入标签云动画js函数,数据重新渲染了,但是动画不执行了 rollTagCloud() {/* 3D标签云滚动函数*/const timer = setTimeout(() => {t ...

在vue项目引入天地图，根据经纬度获取具体地址

1、申请key

2、引入API

3、在vue页面中，创建一个tiandiMap.vue页面，初始化地图，代码如下：

在vue项目引入天地图，根据经纬度获取具体地址相关推荐

最新文章

热门文章