OpenLayers添加地图标记

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

你可能感兴趣的:(OpenLayers添加地图标记)