OpenLayers添加地图标记

2019-07-12 14:00:12 阅读：774 来源： 互联网

标签：标记 marker export 添加 OpenLayers var new png

<!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 onl oad="init()">
    <!-- 地图 DOM 元素 -->
    <div id="ch3_markers" style="width: 100%; height: 100%;"></div>
</body>
</html>

标签：标记,marker,export,添加,OpenLayers,var,new,png
来源： https://www.cnblogs.com/Jeely/p/11175644.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

OpenLayers添加地图标记