<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;}
#allmap {width: 1000px;height: 800px;overflow: hidden;margin:0;border:1px solid #000000;position:relative;float:left;}
#info {position:relative;float:left;}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<title>地址解析</title>
</head>
<body>
<div id="allmap"></div>
</body>
<script type="text/javascript">
function loadScript(){
var script = document.createElement("script");
//v1.5调用方法
script.src = "http://api.map.baidu.com/api?v=1.5&ak=9a67c9d7584fcc0b455e32a9fc4c3f22&callback=displayMap";
}
function displayMap(){
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404556,39.915599);
map.centerAndZoom(point,13);
map.enableScrollWheelZoom();
//创建标示
addMapOverly(map);
}
//创建Mark标示
function addMapOverly(map){
// 定义标示图片
var icon1 = new BMap.Icon("image/标示1.jpg",new BMap.Size(128,128));
var icon2 = new BMap.Icon("image/标示2.jpg",new BMap.Size(128,128));
var icon3 = new BMap.Icon("image/标示3.jpg",new BMap.Size(128,128));
var icon4 = new BMap.Icon("image/标示4.jpg",new BMap.Size(128,128));
// 设置标示
var mark1 = new BMap.Marker(new BMap.Point(116.41433,39.889031),{icon:icon1});
var mark2 = new BMap.Marker(new BMap.Point(116.41433,39.889031),{icon:icon2});
var mark3 = new BMap.Marker(new BMap.Point(116.303371,39.858021),{icon:icon1});
var mark4 = new BMap.Marker(new BMap.Point(116.303371,39.858021),{icon:icon2});
var mark5 = new BMap.Marker(new BMap.Point(116.44092,39.899991),{icon:icon1});
var mark6 = new BMap.Marker(new BMap.Point(116.44092,39.899991),{icon:icon2});
var point1 = new BMap.Marker(new BMap.Point(116.409156,39.968263),{icon:icon3});
var point2 = new BMap.Marker(new BMap.Point(116.409156,39.968263),{icon:icon4});
var point3 = new BMap.Marker(new BMap.Point(116.330967,39.960742),{icon:icon3});
var point4 = new BMap.Marker(new BMap.Point(116.330967,39.960742),{icon:icon4});
var point5 = new BMap.Marker(new BMap.Point(116.450549,39.927994),{icon:icon3});
var point6 = new BMap.Marker(new BMap.Point(116.450549,39.927994),{icon:icon4});
var point7 = new BMap.Marker(new BMap.Point(116.422379,39.92224),{icon:icon3});
var point8 = new BMap.Marker(new BMap.Point(116.422379,39.92224),{icon:icon4});
var point9 = new BMap.Marker(new BMap.Point(116.383859,39.924896),{icon:icon3});
var point10 = new BMap.Marker(new BMap.Point(116.383859,39.924896),{icon:icon4});
var point11 = new BMap.Marker(new BMap.Point(116.411311,39.942932),{icon:icon3});
var point12 = new BMap.Marker(new BMap.Point(116.411311,39.942932),{icon:icon4});
//将这些标示连接成数组进行操作
var marks = [mark1,mark2,mark3,mark4,mark5,mark6,point1,point2,point3,point4,point5,point6,point7,point8,point9,point10,point11,point12];
for(var i=0;i<marks.length;i++){
//alert("i = " + i);
// 标记移动功能
if(i % 2 == 0){
map.addOverlay(marks[i]);
}
if(i == 0){
//监听器
marks[i].addEventListener("click",function(e){
//测试
alert("i = " + i);
// 当鼠标点击这个标示的时候,标示的颜色改
//添加覆盖物
map.addOverlay(mark2);
//删除覆盖物
map.removeOverlay(mark4);
map.removeOverlay(mark6);
map.removeOverlay(point2);
map.removeOverlay(point4);
map.removeOverlay(point6);
map.removeOverlay(point8);
map.removeOverlay(point10);
map.removeOverlay(point12);
// 打开文件提示框
showInfo(map);
});
} else if(i == 2) {
//监听器
marks[i].addEventListener("click",function(e){
//测试
alert("i = " + i);
// 当鼠标点击这个标示的时候,标示的颜色
//添加覆盖物
map.addOverlay(mark4);
//删除覆盖物
map.removeOverlay(mark2);
map.removeOverlay(mark6);
map.removeOverlay(point2);
map.removeOverlay(point4);
map.removeOverlay(point6);
map.removeOverlay(point8);
map.removeOverlay(point10);
map.removeOverlay(point12);
// 打开文件提示
showInfo(map);
});
} else if(i == 4) {
//监听器
marks[i].addEventListener("click",function(e){
//测试
alert("i = " + i);
// 当鼠标点击这个标示的时候,标示的颜色
//添加覆盖物
map.addOverlay(mark6);
//删除覆盖物
map.removeOverlay(mark2);
map.removeOverlay(mark4);
map.removeOverlay(point2);
map.removeOverlay(point4);
map.removeOverlay(point6);
map.removeOverlay(point8);
map.removeOverlay(point10);
map.removeOverlay(point12);
// 打开文件提示
showInfo(map);
});
} else if(i == 6){
//监听器
marks[i].addEventListener("click",function(e){
//测试
alert("i = " + i);
// 当鼠标点击这个标示的时候,标示的颜色
//添加覆盖物
map.addOverlay(point2);
//删除覆盖物
map.removeOverlay(mark2);
map.removeOverlay(mark4);
map.removeOverlay(mark6);
map.removeOverlay(point4);
map.removeOverlay(point6);
map.removeOverlay(point8);
map.removeOverlay(point10);
map.removeOverlay(point12);
// 打开文件提示
showInfo(map);
});
} else if(i == 8){
//监听器
marks[i].addEventListener("click",function(e){
//测试
alert("i = " + i);
// 当鼠标点击这个标示的时候,标示的颜色
//添加覆盖物
map.addOverlay(point4);
//删除覆盖物
map.removeOverlay(mark2);
map.removeOverlay(mark4);
map.removeOverlay(mark6);
map.removeOverlay(point2);
map.removeOverlay(point6);
map.removeOverlay(point8);
map.removeOverlay(point10);
map.removeOverlay(point12);
// 打开文件提示
showInfo(map);
});
} else if(i == 10){
//监听器
marks[i].addEventListener("click",function(e){
//测试
alert("i = " + i);
// 当鼠标点击这个标示的时候,标示的颜色
//添加覆盖物
map.addOverlay(point6);
//删除覆盖物
map.removeOverlay(mark2);
map.removeOverlay(mark4);
map.removeOverlay(mark6);
map.removeOverlay(point2);
map.removeOverlay(point4);
map.removeOverlay(point8);
map.removeOverlay(point10);
map.removeOverlay(point12);
// 打开文件提示
showInfo(map);
});
} else if(i == 12){
//监听器
marks[i].addEventListener("click",function(e){
//测试
alert("i = " + i);
// 当鼠标点击这个标示的时候,标示的颜色
//添加覆盖物
map.addOverlay(point8);
//删除覆盖物
map.removeOverlay(mark2);
map.removeOverlay(mark4);
map.removeOverlay(mark6);
map.removeOverlay(point2);
map.removeOverlay(point4);
map.removeOverlay(point6);
map.removeOverlay(point10);
map.removeOverlay(point12);
// 打开文件提示
showInfo(map);
});
} else if(i == 14){
//监听器
marks[i].addEventListener("click",function(e){
//测试
alert("i = " + i);
// 当鼠标点击这个标示的时候,标示的颜色
//添加覆盖物
map.addOverlay(point10);
//删除覆盖物
map.removeOverlay(mark2);
map.removeOverlay(mark4);
map.removeOverlay(mark6);
map.removeOverlay(point2);
map.removeOverlay(point4);
map.removeOverlay(point6);
map.removeOverlay(point8);
map.removeOverlay(point12);
// 打开文件提示
showInfo(map);
});
} else if(i == 16){
//监听器
marks[i].addEventListener("click",function(e){
// 当鼠标点击这个标示的时候,标示的颜色
//添加覆盖物
map.addOverlay(point12);
//删除覆盖物
map.removeOverlay(mark2);
map.removeOverlay(mark4);
map.removeOverlay(mark6);
map.removeOverlay(point2);
map.removeOverlay(point4);
map.removeOverlay(point6);
map.removeOverlay(point8);
map.removeOverlay(point10);
// 打开文件提示
showInfo(map);
});
}
}
}
function showInfo(map){
var windows = {width:100,height:50,title:"天坛"}
var infoWindow = new BMap.InfoWindow("北京天坛",windows);
//打开窗口的方式
map.openInfoWindow(infoWindow,map.getCenter());
}
//页面加载完成后创建script引用
window.onload=loadScript;
</script>
</html>
以下是我的地图特效演示
利用百度地图API开发地图软件,在循环标示数组的时候,进入click监听器,每次输出循环遍历的i值的都是数组的长度i=18,按照正常的逻辑,监听器里面的i应该是循环到点击到的marks[i]的这个i值啊???
这个和JS监听器有什么关系吗???
真不知道,不知道这个问题如何解决???
所以,我无法使用循环遍历的marks[i]对点击和没有点击的标示进行判断,所有,每次都要将所有的没有点击的标示都除掉红色点解的覆盖物。
请做过网上电子地图开发的高手,给一些指点,谢谢各位了!!!