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

</body>

</html>

OpenLayers添加地图标记的更多相关文章

  1. openlayers 添加标记点击弹窗 定位图标闪烁

    环境vue3.0 ,地图为公用组件,将添加图标标记的方法放在公共地图的初始化方法里 同一时间弹窗和定位标识都只有一个,因而我把弹窗和定位标记的dom预先写好放到了页面 //矢量标注样式设置函数,设置i ...

  2. OpenLayers添加和删除控件

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. openlayers添加弹出框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. OpenLayers 添加OpenStreetMap(OSM)瓦片层示例

    This article from:http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example Deploy an OpenStreetM ...

  5. openlayers三：添加图片和图标

    openlayers添加图片是指: 添加在地图上的图片会跟随地图同步放大缩小 而添加图标是指: 添加在地图上的图片不会跟随地图同步放大缩小 添加图片: 首先初始化图片图层: initImageLaye ...

  6. openlayers加载百度地图

    最近在做openlayers添加百度地图的扩展类,经过轮番的尝试,终于将其接入了,但是发现偏差比较大,有根据百度的坐标进行了比对,将切片原点进行了调整,发现OK了.打开百度地图,可以看出切片的路径如: ...

  7. 基于JavaScript google map集成流程

    google地图集成流程 一.获取Google Map API密钥 1.进入Google官网 => https://www.google.com.hk/ ,申请一个谷歌账号(如果没有)然后访问下 ...

  8. postgreSQL使用sql归一化数据表的某列，以及出现“字段 ‘xxx’ 必须出现在 GROUP BY 子句中或者在聚合函数中”错误的可能原因之一

    前言: 归一化(区别于标准化)一般是指,把数据变换到(0,1)之间的小数.主要是为了方便数据处理,或者把有量纲表达式变成无量纲表达式,便于不同单位或量级的指标能够进行比较和加权. 不过还是有很多人使用 ...

  9. OpenLayers访问WTMS服务及添加Googlemap

    1.访问WMS服务 首先需要发布WMS服务,才能进行地图WMS服务访问.这里不说怎么发布WMS服务,直接看怎么调用,代码如下: 代码 Code highlighting produced by Act ...

随机推荐

  1. <每日一题>题目18：对象组合和对象构造面试题(深度优先和广度优先的问题)

    class Node(object): def __init__(self,sName): self._lChildren = [] self.sName = sName def __repr__(s ...

  2. C#窗体阴影

    /// <summary> /// 边框阴影 /// </summary> protected override CreateParams CreateParams { get ...

  3. 用DataTable填充实体类List

    /// <summary> /// 用DataTable填充实体类List /// </summary> public static List<T> FillLis ...

  4. https://blog.csdn.net/qq_33169863/article/details/82977791

    https://blog.csdn.net/qq_33169863/article/details/82977791 ** 查看设备连接  adb devices ** 列出手机已安装的包名 adb ...

  5. session中load()跟get()的区别

    1.相同点:Session.load/get方法均可以根据指定的实体类和id从数据库读取记录,并返回与之对应的实体对象. 2.区别在于: (1)如果未能发现符合条件的记录,get方法返回null,而l ...

  6. 通过media媒体查询设置ie7/8样式、使用media判断各机型、手淘flexible.js

    @media all and (min-width:1280px){ /* 所有设备宽度大于1280干嘛干嘛嘞... */ body{ background:#f00; } } @media (min ...

  7. Nodejs Express目录结构

    原文  http://www.leixuesong.cn/1508 Express是一个基于Node.js平台的极简.灵活的web应用开发框架.在前面我们已经详细介绍了Express的安装,下面详细讲 ...

  8. 深入浅出 Java Concurrency - 目录 [转]

    这是一份完整的Java 并发整理笔记,记录了我最近几年学习Java并发的一些心得和体会. J.U.C 整体认识 原子操作 part 1 从AtomicInteger开始 原子操作 part 2 数组. ...

  9. 原 jeecms9自定义标签以及使用新创建的数据库表

    转载地址:https://blog.csdn.net/nice_meng/article/details/89179089 本系统使用的是jeecmsv9版本,收集网上知识后,进行个人汇总 首先,自己 ...

  10. Redis生存时间、删除策略和排序

    生存时间 设置命令 expire key long:设置数据在long秒后过期. pexpire key long:设置数据在long毫秒后过期. ttl key:查询数据剩余的生存时间.如果数据已过 ...