<template>
<div>
<header>天地图</header>
<div id="mapDiv" style="position: absolute; width: 90%; height: 90%"></div>
</div>
</template>
<script>
export default {
name: 'tianditu',
data() {
return {
};
},
mounted() {
this.loadMap();
window.openPage=this.openPage;
},
methods: {
openPage(){
this.$router.push('/dis/data');
},
loadMap () {
var map;
var zoom = 16;
//初始化地图对象
map = new T.Map("mapDiv", {datasourcesControl: true});
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(110.074846, 39.201972), zoom);
//允许鼠标滚轮缩放地图
map.enableScrollWheelZoom();
//创建地图类型对象
var ctrl = new T.Control.MapType();
//添加控件 设为卫星混合
map.addControl(TMAP_HYBRID_MAP );
//创建标注对象
//这个是水头梁
var marker = new T.Marker(new T.LngLat(110.074846,39.201972));
//向地图上添加标注
map.addOverLay(marker);
//创建一个窗口实例
var infoWin = new T.InfoWindow();
var Content =
`
<div id="win_box" style="height: auto; ">
<table style=" width:300px;border-collapse: separate;font-size:14px;border-spacing:0 6px;table-layout:fixed;">
<caption style="font-weight:bold;font-size:16px;text-align: left;border-bottom: #d1d8e0 1px solid">地块详情</caption>
<tr><td style=" width: 20%;font-weight:bold;text-align:left;">地点:</td><td style="text-align:left;width:45%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">崇左市江州区渠留屯周边</td></tr>
<tr><td style=" font-weight:bold;text-align:left;">类别:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">耕地</td></tr>
<tr><td style=" font-weight:bold;text-align:left;">面积:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">22.5亩</td></tr>
<tr><td style=" font-weight:bold;text-align:left;">种植类型:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">粤糖 55</td></tr>
<tr><td style=" font-weight:bold;text-align:left;">种植时间:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">2019/02/04</td></tr>
<tr><td style=" font-weight:bold;text-align:left;">联系人名:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">龙先生</td></tr>
<tr><td style=" font-weight:bold;text-align:left;">联系电话:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">135****7823</td></tr>
<tr><td style=" font-weight:bold;text-align:left;color: #fa8231;cursor: pointer" οnclick="massifExhibit()">最新情况:</td><td style="text-align:left;width:80%;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"><a href="javascript:void(0)" onclick="openPage()">位移变化趋势图</a></td></tr>
</table>
</div>
`;
infoWin.setContent(Content);
// //设置信息浮窗的显示 HTML 内容。
// infoWin1.setContent(sContent);
//添加事件监听函数 监听点击显示事件
marker.addEventListener("click", function () {
//打开信息窗
marker.openInfoWindow(infoWin);
});
var str=infoWin.getContent();
console.log(str);
}
}
}
</script>
<style scoped>
</style>