<!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=" 100%; height: 100%;"></div> </body> </html>