高德地图 怎么解决给覆盖物绑定事件不触发的bug?

下面的JSP主要是为了还原当时的场景:
1、使用高德地图API。
2、一个标记要在地图上移动,如果走出了指定区域就“报警”。
3、我的实现:模拟这个指定区域,我画了多边形。标记我选了点标记,图像是个可爱的小汽车。我给小汽车绘制了行驶路线,小汽车会在路线起点出生,然后我给车点火,车就滚着轱辘出发了。
4、遇到的问题之一是给汽车绑定事件,如果它走出指定区域就“报警”。高德地图API是不会教我的。
5、那我最后怎么解决的?

  • 还是™众里寻他千xx解决的,不过它没有解决方案,倒是给了我启发。
  • 我的小汽车(覆盖物)的出生是和一个按钮绑定的,所以在一个方法中。
  • 小汽车移动和另一个事件绑定,在另一个方法中。
  • 触发警报又是一个事件。
  • 我琢磨着汽车在移动中触发警报,但是移动已经和一个事件绑定了,这怎么办?聪明的我把事件的绑定放到了汽车的出生处,汽车初始化的时候我绑定了事件。

我想给高德地图的一个覆盖物添加两个事件,困扰了很长时间。看网上有人说JS事件中如果要给一个元素绑定两个事件要使用监听器,我试了试,还试了试按钮绑定事件。就是下面代码-------------------后面的,那是我丢弃的。

下面的代码是残卷。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<title>demo</title>
	<style type="text/css">		
		#container {
			width: 600px;
			height: 600px;
			margin-left: 550px;
			margin-top: 150px;
			border: 1px solid green;
		}
    </style>
    <!-- 加载地图JSAPI脚本 -->
	<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=你申请的key值</script>
	<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js" ></script>
</head>
<body>
	<div id="container"></div>
	<script type="text/javascript">
		/* 初始化地图。同步加载。 */
		var map;
		map = new AMap.Map('container', {
        		resizeEnable: true,
        		zoom:14, 
        		center: [112.5367428,37.85923], //初始化地图中心点
    		});
    	
		/* 加载鼠标工具插件 */
		map.plugin(["AMap.MouseTool"],function(){ 
			var mousetool = new AMap.MouseTool(map); 
			mousetool.marker(); //使用鼠标工具,在地图上画标记点
    		});
    	
		/* 覆盖物(以多边形为例)+围栏进出判断 */
		/* 覆盖物这些代码好像得全写在前面,写在后面它不给加载  */ 
		var path = [
        	[112.5967428,37.85923],
        	[112.5267428,37.89923],
        	[112.5267428,37.83923],
        	[112.5967428,37.83923]
		];
       
		//画多边形。和地图画法没什么区别。选好属性。
		var polygon;
		function drawPolygon(){
			polygon = new AMap.Polygon({
				map: map,
				path: path,
				strokeColor: "black",
				strokeWeight: 6,
				strokeOpacity: 0.9,
				fillOpacity: 0.25,
			});
		}
        
		/* 轨迹动画 */
		var lineArr = []; //存放点标记的数组
		var marker; //点标记:模拟小汽车
		var polyline; //点标记形成的路径
		var passedPolyline; //小汽车行驶经过的路径
		//和小汽车进出围栏的判断相关的两个属性。
		var point;
		var isPointInRing;

		map.on('click', function(e) {
			lineArr.push([e.lnglat.getLng(),e.lnglat.getLat()]); //获取鼠标点击处的经纬度    		
		});
    
		//小汽车图标
		function drawCar(){
			marker = new AMap.Marker({
				map: map,
				position: lineArr[0],
				icon: "https://webapi.amap.com/images/car.png",
				offset: new AMap.Pixel(-26, -13), //偏移量
				autoRotation: true, //可旋转
				angle:-90, //点标记的旋转角度,用于改变车辆行驶方向
			});
    	 	
			//在小汽车出生的时候绑定事件。我这样绑定后解决了小汽车事件们不触发的bug。
			marker.on('moving',function(e){
	        		point = marker.getPosition();
	        		isPointInRing = AMap.GeometryUtil.isPointInRing(point,path);
	        		marker.setLabel({
	        			content:isPointInRing?'内部':'外部',
	        			offset:new AMap.Pixel(20,0)
				}); 
			});	
		}
        
		//绘制轨迹
		function drawPath(){
			polyline = new AMap.Polyline({
				map: map,
				path: lineArr,
				showDir:true,
				strokeColor: "red", 
				strokeWeight: 6,   
			});
		}
        
		//开启轨迹动画。利用点标记的moveAlong方法模拟车辆的行驶。
		function startAnimation() { 
        		marker.moveAlong(lineArr, 500); 
		}
        
        	---------------------------下面三段代码已废弃----------------------------
		Amap.event.addListener(marker,'moving',function(e){
			passedPolyline.setPath(e.passedPath);  //设置组成该折线的节点数组
		})
        
		Amap.event.addListener(marker,'dragging',function(e){
        		point = marker.getPosition();
			isPointInRing = AMap.GeometryUtil.isPointInRing(point,path);
			marker.setLabel({
				content:isPointInRing?'内部':'外部',
				offset:new AMap.Pixel(20,0)
			}); 
		})  
        
		function birds(){
        		Amap.event.addListener(marker,'moving',function(e){
            			passedPolyline.setPath(e.passedPath);  //设置组成该折线的节点数组
			}) 
			
			Amap.event.addListener(marker,'dragging',function(e){
				point = marker.getPosition();
				isPointInRing = AMap.GeometryUtil.isPointInRing(point,path);
				marker.setLabel({
					content:isPointInRing?'内部':'外部',
					offset:new AMap.Pixel(20,0)
				}); 
			})
		}    
	</script>
</body>
</html>
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页