<!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_popups"); 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 pointLayer = new OpenLayers.Layer.Vector("Features", { projection: "EPSG:900913" }); map.addLayer(pointLayer); //创建一些随机的要素 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" ]; // 创建一些随机的要素点 var pointFeatures = []; 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; // Create a lonlat instance and transform it to the map projection. var lonlat = new OpenLayers.LonLat(px, py); lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); var pointGeometry = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat); var pointFeature = new OpenLayers.Feature.Vector(pointGeometry, null, { pointRadius: 16, fillOpacity: 0.7, externalGraphic: 'http://localhost:8080/openlayers-cookbook/recipes/data/icons/'+icons[icon] }); pointFeatures.push(pointFeature); } pointLayer.addFeatures(pointFeatures); // 添加到触发矢量图层上的事件需要选择功能控制 var selectControl = new OpenLayers.Control.SelectFeature(pointLayer, { hover: true, onSelect: function(feature) { var layer = feature.layer; feature.style.fillOpacity = 1; feature.style.pointRadius = 20; layer.drawFeature(feature); var content = "<div><strong>Feature:</strong> <br/>" + feature.id + "<br/><br/><strong>Location:</strong> <br/>" + feature.geometry +"</div>"; var popup = new OpenLayers.Popup.FramedCloud( feature.id+"_popup", feature.geometry.getBounds().getCenterLonLat(), new OpenLayers.Size(250, 100), content, null, false, null); feature.popup = popup; map.addPopup(popup); }, onUnselect: function(feature) { var layer = feature.layer; feature.style.fillOpacity = 0.7; feature.style.pointRadius = 16; feature.renderIntent = null; layer.drawFeature(feature); map.removePopup(feature.popup); } }); map.addControl(selectControl); selectControl.activate(); } </script> </head> <body onload="init()"> <!-- 地图 DOM 元素 --> <div id="ch3_popups" style=" 100%; height: 100%;"></div> </body> </html>