Vue项目中应用天地图

引入天地图 js

首先到天地图官网获取服务许可key；国家地理信息公共服务平台天地图

全局引入地图 js 库

在Vue项目的index.html 文件中，全局引入天地图js库

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

这种方法引入的地图 js，会导致项目的每一个组件都会加载该 js，尤其在不需要加载天地图的页面，会造成很大的性能损耗；而在首页不需要天地图时，天地图加载缓慢，会造成很长的白屏时间，因此需要优化一下引入地图 js 的方法；

创建dom元素并插入

在需要引入 js 的页面，创建script元素，设置 src 属性，并插入；这样就会只在该页面中引入天地图 js；

mounted() {let script = document.createElement('script')script.type = 'text/javascript'script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=申请的key'document.body.appendChild(script)
},

应用天地图

<template><div id="map"></div>
</template><script>
export default {data() {return {map: {}}},mounted() {this.load();},methods: {load() {const init = new Promise((resolve, reject) => {if(window.T) {console.log('地图初始化成功')resolve(window.T)reject('error')}})init.then(T => {this.map = new T.Map('map');this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12);})},}
}
</script>
<style scoped>
#map {width: 1000px;height: 300px;
}
</style>

添加标注点，点击标注点出现信息窗口

在上述代码基础上添加一个按钮

<el-button type="primary" @click="handleAddPoint">添加标注点</el-button>data() {return {map: {},longitude: 116.403963,latitude: 39.915119}
},methods: {handleAddPoint() {this.map.clearOverLays(); //清空原来的标注点let point = new T.LngLat(this.longitude -= 0.01,this.latitude -= 0.01)let marker = new T.Marker(point)this.map.addOverLay(marker) //添加标注点//点击标注点事件，添加信息窗口let markerInfoWin = new T.InfoWindow("信息窗口");marker.addEventListener('click', function() {marker.openInfoWindow(markerInfoWin);})},
}

地理编码：根据地址名称进行坐标解析并标注到地图上

在以上代码基础上添加下面内容

<div style="display: flex"><el-input style="width: 300px; margin-right: 10px" v-model="inputLocation" @keyup.enter.native="handleFindLocation"></el-input><el-button type="primary" @click="handleFindLocation">搜索</el-button>
</div>data() {return {map: {},inputLocation: ''}
},handleFindLocation() {let geocoder = new T.Geocoder()let that = thisfunction searchResult(result){if(result.getStatus() == 0){//将地图的中心点变换到输入的地理位置，同时缩放到指定等级that.map.panTo(result.getLocationPoint(), 16);//创建标注对象let marker = new T.Marker(result.getLocationPoint());//向地图上添加标注that.map.addOverLay(marker);}else{alert(result.getMsg());}        }geocoder.getPoint(this.inputLocation, searchResult);
},

Vue项目中应用天地图相关推荐

Vue项目中引入天地图
在Vue的静态资源目录下的index.html中引入天地图的底图天地图API: 在引入了Vue项目以后及将需要用到的功能从window对象下赋值给当前项目的Data; <script type= ...
vue项目中使用天地图
天地图使用示例一.申请key 二.代码部分 1.静态引入 2.创建容器 3.创建基础地图 4.创建卫星图图层 5.创建点位遮盖物 6.点位弹窗展示一.申请key 链接: http://lbs.ti ...
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项目中应用天地图

引入天地图 js

全局引入地图 js 库

创建dom元素并插入

应用天地图

添加标注点，点击标注点出现信息窗口

地理编码：根据地址名称进行坐标解析并标注到地图上

Vue项目中应用天地图相关推荐

最新文章

热门文章

Vue项目中应用天地图

引入天地图 js

全局引入地图 js 库

创建dom元素并插入

应用天地图

添加标注点，点击标注点出现信息窗口

地理编码： 根据地址名称进行坐标解析并标注到地图上

Vue项目中应用天地图相关推荐

最新文章

热门文章

地理编码：根据地址名称进行坐标解析并标注到地图上