<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>添加地图标记</title>
<link rel="stylesheet" href="./OpenLayers-2.12/theme/default/style.css" type="text/css" />
<script src="./OpenLayers-2.12/lib/OpenLayers.js"></script>
<script type="text/javascript">
function init(){
var map = new OpenLayers.Map("ch3_markers");
var layer = new OpenLayers.Layer.OSM("OpenStreetMap");
map.addLayer(layer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0,0), 2);
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
// Create some random markers with random icons
var icons = [
"alligator.png",
"chicken-2.png",
"elephants.png",
"pets.png",
"snakes.png",
"wildlifecrossing.png",
"animal-shelter-export.png",
"cow-export.png",
"frog-2.png",
"pig.png",
"spider.png",
"zoo.png",
"ant-export.png",
"deer.png",
"lobster-export.png",
"rodent.png",
"tiger-2.png",
"bats.png",
"dolphins.png",
"monkey-export.png",
"seals.png",
"turtle-2.png",
"birds-2.png",
"duck-export.png",
"mosquito.png",
"shark-export.png",
"veterinary.png",
"butterfly-2.png",
"eggs.png",
"penguin-2.png",
"snail.png",
"whale-2.png"
];
for(var i=0; i< 150; i++) {
// 随机计算标记摆放经纬度坐标
var icon = Math.floor(Math.random() * icons.length);
var px = Math.random() * 360 - 180;
var py = Math.random() * 170 - 85;
// 新建标记大小，像素点
var size = new OpenLayers.Size(32, 37);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('./data/icons/'+icons[icon], size, offset);
icon.setOpacity(0.7);
// 将经纬度坐标转换为地图工程
var lonlat = new OpenLayers.LonLat(px, py);
lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
// 添加标记
var marker = new OpenLayers.Marker(lonlat, icon);
//事件处理程序，当鼠标移动图标时，图标变大更改其不透明度
marker.events.register("mouseover", marker, function() {
this.inflate(1.2);
this.setOpacity(1);
});
//事件处理程序，当鼠标移动图标时，图标变大更改其不透明度
marker.events.register("mouseout", marker, function() {
this.inflate(1/1.2);
this.setOpacity(0.7);
});
markers.addMarker(marker);
}
}
</script>
</head>
<body onload="init()">
<!-- 地图 DOM 元素 -->
<div id="ch3_markers" style="width: 100%; height: 100%;"></div>
</body>
</html>
