Vue项目使用天地图标注中点击跳转到其他vue页面

简介: Vue项目使用天地图标注中点击跳转到其他vue页面

1.在mounted周期函数中定义window函数指向


mounted() {
    window.openPage=this.openPage;
  },


2.在method定义事件函数


methods: {
    openPage(){
              this.$router.push('/dis/data');
             }


3.自定义一个地图标签窗口类InfoWindow


var Content =
    `<a href="javascript:void(0)" onclick="openPage()">位移变化趋势图</a></td></tr>
      </table>
    </div>
    `;


4.完整代码


<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>
相关文章
|
27天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
27天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
24 1
|
27天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
27天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript Java 物联网
现有vue项目seo优化
现有vue项目seo优化
|
JavaScript 前端开发
重读vue电商网站45之项目优化上线
重读vue电商网站45之项目优化上线
134 0
重读vue电商网站45之项目优化上线
|
29天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
36 1
vue学习第一章
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
26 1
vue学习第三章
下一篇
DataWorks