在Vue项目中使用天地图（一）
在Vue项目中使用天地图（一）
前言
本片文章算是自己之前做的一个智慧农业项目的总结，采用Vue2.0+H5开发，天地图官方文档：天地图官方文档, 主要实现的功能是包括地块的管理功能，使用天地图完成地图展示、地图交互、地图标注、轨迹展示、坐标点位编辑等。
- 注册,申请为开发者并申请天地图key。
- 在index.html中引入天地图官方的js文件
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>
- 在页面中使用（vue单文件页面）
<template>
<div class="map-area">
<div class="map-container" id="map-container"></div>
</div>
</template>
<script>
export default {
data() {
return {
polygon_layers: [],
map_layer: null,
marker_layer: null,
number_overlays: []
};
},
mounted() {
this.initMap();
},
methods: {
// 初始化卫星地图
initMap() {
const zoom = 10;
const center = new window.T.LngLat(116.39131, 39.90705);
this.map_layer = new window.T.Map("map-container");
this.map_layer.centerAndZoom(center, zoom);
this.map_layer.addControl(TMAP_HYBRID_MAP);
this.map_layer.disableDoubleClickZoom();
},
}
}
<style lang="less" scoped>
.map-area {
width: 100vw;
height: 100vh;
.map-container {
width: 100%;
height: 100%;
}
}
</style>