vue集成天地图
文章目录Vue集成天地图一、前言二、正文Vue集成天地图一、前言开发环境Vue.js：2.9.6天地图 JavaScript API：4.0参考：Vue.js官网：https://cn.vuejs.org/天地图官网：https://www.tianditu.gov.cn/天地图入门指导：http://lbs.tianditu.gov.cn/api/js4.0/guide.htmlvue集成ces
·
vue集成天地图
一、前言
- 开发环境
- Vue.js：
2.9.6- 天地图 JavaScript API：
4.0
- 参考：
- Vue.js官网：https://cn.vuejs.org/
- 天地图官网：https://www.tianditu.gov.cn/
- 天地图入门指导（js）：http://lbs.tianditu.gov.cn/api/js4.0/guide.html
- 天地图代码示例（js）：http://lbs.tianditu.gov.cn/api/js4.0/examples.html
- vue集成cesium：https://blog.csdn.net/u011424614/article/details/103403275
- vue入门和使用实践：https://blog.csdn.net/u011424614/article/details/94478809
二、正文
index.html中引入天地图在线 API
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-tdt-demo</title>
<!-- 引入天地图在线 API -->
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
- components 文件夹中新建
TdtMap.vue组件
mounted()中初始化天地图
<template>
<div :id="tdtMapDivID" class="divTdtMap"></div>
</template>
<script>
export default {
name: 'TdtMap',
data() {
return {
tdtMapDivID: "tdtMapDivID_"+this._uid,
tdtMap: {}
}
},
created() {
},
mounted(){
// 初始化天地图
this.initTdtMap()
},
watch: {
},
methods: {
// 初始化天地图
initTdtMap(){
this.tdtMap = new T.Map(this.tdtMapDivID)
this.tdtMap.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12)
},
}
}
</script>
<style scoped>
.divTdtMap {
margin: 0px;
padding: 0px;
width: 100%;
height: 80vh;
z-index: 0;
}
</style>
- 测试组件，新建
test.vue
导入组件、注册组件和使用组件
<template>
<!-- 使用组件 -->
<TdtMap></TdtMap>
</template>
<script>
/* 导入组件 */
import TdtMap from './components/TdtMap'
export default {
name: 'TdtMap',
components: {
/* 注册组件 */
TdtMap,
},
data() {
return {
}
},
created() {
},
mounted(){
},
watch: {
},
methods: {
},
}
</script>
<style scoped>
</style>
三、其它
1.隐藏天地图LOGO
- 设置隐藏样式
document.getElementsByClassName("tdt-control-copyright tdt-control")[0].style.display = 'none'
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献3条内容
所有评论(0)