OpenLayers添加地图标记

╰半夏微凉° 2021-11-14 13:58 600阅读 0赞

<!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()">
        
        <div id="ch3_markers" style="width: 100%; height: 100%;"></div>
    </body>
    </html>

转载于:https://www.cnblogs.com/Jeely/p/11175644.html