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