vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue marker点击

vue中marker被识别点击的过程场景分析

作者:akglobe

这篇文章主要介绍了vue中marker被识别点击的过程场景分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

1.识别点击

1.1初始onEvent

在初始化场景的地方onEvent是与场景交互的,

我们这里就设置成当场景被点击的方法

ak_event调用当中的方法是需要提前引入的

1.2 onEvent.js

/**
 * 事件处理点击
 * 起点在init_test内
 */
import ak_click from "./ak_click.js";
import ak_api from "../../api/ak_api.js";
var  ak_event= {
	/**
	 * 控制
	 */
    handler: null,
	currentClickObject:null,
	/**
	 * 初始化
	 */
	init:function(e){
		if(e.eventtype=="LeftMouseButtonClick"){
			ak_event.LeftMouseButtonClick(e);
		}
	},
	type:1,
	LeftMouseButtonClick:function(e){
      window.modelId ="";
		if(e.Type=="marker"){
       window.modelId = e.Id
			 // config.modelId=e.Id;
			 console.log("我是marker  我的ID 是:::::"+e.Id);
			 ak_click.getClickObj();
			 return ;
		}else if(e.Type=="TileLayer"){
			//  该变量将作为 其他业务使用的参数 获取期内的objectId,坐标 范围等参数
			 ak_event.currentClickObject=e;
			 var ObjectID=e.Id;//  e.ObjectID;
			 console.log("我是TileLayer  信息  我即将被点击  ");
			 console.log("dddddddddddddddddddddddd");
			   __g.tileLayer.stopHighlightActor();
			 if(ObjectID){
                ak_click.getClickObj(e.Id);
			}else{
				// 如果没有Objid 进行处理
			}
		}else if(e.Type=="Custom_Tag"){
			//  该变量将作为 其他业务使用的参数 获取期内的objectId,坐标 范围等参数
			ak_event.currentClickObject=e;
			var ObjectID=e.Id;//  e.ObjectID;
			var ss = ObjectID.indexOf("hjs");
			if(ObjectID.indexOf("hjs")!=-1){
				console.log("Custom_Tag:环境水:"+ObjectID);
			}else if(ObjectID.indexOf("cktxp")!=-1){
				console.log("Custom_Tag:窗口:"+ObjectID);
			}
		}
	},
}
export default ak_event

我们写的js中的方法想要其他地方能引用,需要在最下面,写

export default ak_event   每个js都是如此,ak_event是需要和js名统一和var 的变量名一致

这里判断的是识别是点击的marker还是TileLayer

if(e.Type=="marker"){
       window.modelId = e.Id
             // config.modelId=e.Id;
             console.log("我是marker  我的ID 是:::::"+e.Id);
             ak_click.getClickObj();
             return ;
 }else if(e.Type=="TileLayer"){

把id设置成全局变量供其他方法可使用

 window.modelId = e.Id

1.3 判断是那个marker被点击

判断那个marker被点击是根据设置marker的时候id

在ak_event里面 判断如果是marker被点击,会进入到ak_click方法中,然后根据写好的id前缀来判断是那个marker被点击,点击后要执行的方法,

 ak_click代码

/**
 * 点击事件的处理
 */
import ak_even from "./ak_event.js";
import ak_spjk from "../../cloud/ak_business_geodb/ak_spjk.js";
var  ak_click={
	obj1:null,
	getClickObj:function(){
     var id=modelId;
     var e=id;
		 if(id.indexOf("MPH001")>0){
		     ak_mpjz.Showimagegs();
			 return ;
		 }
		// 高亮选中 对象
	  //	__g.tileLayer.highlightActor(config.currentTileLayerId, e);
		if(e.indexOf("bgsb")>0){ //办公设备
					// 展示办公电脑的 监控情况  正常异常对比
					if(e.indexOf("bgsb_dn")>0){
						ak_bangong.getBgWindowsSbTj(7);
						//展示办公设备打印机的 监控情况 正常-异常对比
					}else if(e.indexOf("bgsb_dyj")>0){
						ak_bangong.getBgWindowsSbTj(7);
						//展示办公设备大型打印机的 监控情况 正常-异常对比
					}
			}
			 //视频监控
			else if(id.indexOf("spjk")>0){
				if(id.indexOf("spjk_ptsxt")>0){
						ak_spjk.getIpByMid();
				}
			}else if(e.indexOf("yy")>0){   //预约
				if(e.indexOf("yy_qhj")>0){
					// 取号机的 性能监测数据
					ak_bangong.getZwAndroidSbTj(7);
				}else if(e.indexOf("yy_pjq")>0){
					//评价器的 性能监测数据
					ak_bangong.getZwAndroidSbTj(7);
				}else if(e.indexOf("yy_jhq")>0){
					//叫号器的 性能监测数据
					ak_bangong.getZwAndroidSbTj(7);
				}else if(e.indexOf("yy_jhp")>0){
					//叫号屏的 性能监测数据
					// ak_bangong.getZwAndroidSbTj();
				}else if(e.indexOf("yy_zzj")>0){
					//自助机的 性能监测数据
					ak_zichan.getSbZzjInfo();
				}else if(e.indexOf("yy_cktxp")>0){
					//窗口条形屏的 性能监测数据
					ak_yuyue.getckModel();
				}
			}else if(e.indexOf("xxfb")>0){ //信息发布
				if(e.indexOf("xxfb_dp")>0){
					//  大屏幕 展示轮播 视频
					ak_message.getXxfbsplb();
				}else if(e.indexOf("xxfb_txp")>0){
					//  条形屏幕 展示轮播 视频
					ak_message.getXxfbsplb();
				}else if(e.indexOf("xxfb_zd")>0){
					//  终端 展示轮播 图片
					ak_message.getXxfbtplb();
				}else if(e.indexOf("xxfb_hxp")>0){
					//  环形屏 展示轮播 视频
					ak_message.getXxfbsplb();
				}
			}else if(e.indexOf("cd")>0){ //场地
				if(e.indexOf("cd_hys")>0){
					//  场地 会议室
					ak_field.gethysModel();
				}else if(e.indexOf("cd_mj")>0){
					// 场地门禁
					ak_field.gethysModel();
				}
			}
	}
}
export default ak_click;

ak_spjk.js

var ak_spjk={
  getIpByMid:function(){
    console.log("啦啦啦啦+++++视频监控了"+modelId)
    console.log(modelId)
  }
}
export default ak_spjk;

到此这篇关于vue中marker被识别点击的过程场景分析的文章就介绍到这了,更多相关vue marker点击内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文