下面的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>
< charset=\"utf-8\">
< http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
< name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no, width=device-width\">
< >demo</ >
<style type=\"text/css\">
#container {
width: 600px;
height: 600px;
margin-left: 550px;
margin-top: 150px;
border: 1px solid green;
}
</style>
<!-- 加载地图JSAPI脚本 -->
< src=\"https://cache.amap.com/lbs/static/es5.min.js\"></ >
< type=\"text/ \" src=\"https://webapi.amap.com/maps?v=1.4.11&key=你申请的key值</ >
< type=\"text/ \" src=\"https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js\" ></ >
</head>
<body>
<div id=\"container\"></div>
< type=\"text/ \">
/* 初始化地图。同步加载。 */
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)
});
})
}
</ >
</body>
</html>
继续阅读与本文标签相同的文章
下一篇 :
万钢：正起草促进中国人工智能创新发展规划
-
3D打印在玩具行业的应用
2026-05-18栏目： 教程
-
湖北移动誓师第七届世界军人运动会通信保障
2026-05-18栏目： 教程
-
环保新主义：企业无纸化办公
2026-05-18栏目： 教程
-
华能＋华为＝光伏技术标杆
2026-05-18栏目： 教程
-
淘集集经营模式变更：合伙人自营，主要供应商已成股东合伙人
2026-05-18栏目： 教程