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

最新推荐文章于 2024-05-10 01:12:54 发布

bagpiping

最新推荐文章于 2024-05-10 01:12:54 发布

阅读量5.6k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/bagpiping/article/details/85064931

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

下面的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>

bagpiping

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
高德地图怎么解决给覆盖物绑定事件不触发的bug？

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

扫一扫