<!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. SpringBoot使用注解方式整合Redis

    1.首先导入使用Maven导入jar包 <dependency> <groupId>org.springframework.boot</groupId> <a ...

  2. <每日一题>题目28：简单的python练习题(51-60)

    #51.一行代码实现1-100的和 sum(range(1,101)) #52.如何在一个函数内部修改全局变量 ''' 利用global ''' #53.字典如何删除和合并2个字典 ''' del d ...

  3. <每日一题>题目16:简单的python练习题(1-10)

    #1.python程序中__name__的作用是什么? __name__这个系统变量用来表示程序的运行方式. 如果程序在当前膜快运行,__name__的名称就是__main__, 如果不在(被调用), ...

  4. HBase与传统关系数据库的对比分析

  5. linux支持大容量硬盘

    1.fdisk使用msdos格式分区,最大支持2T硬盘,要使用大于2T硬盘需使用parted命令使用GPT格式分区. 2.除修改分区格式外,linux内核需添加GPT分区格式支持,修改如下: CONF ...

  6. [编织消息框架][netty源码分析]11 ByteBuf 实现类UnpooledHeapByteBuf职责与实现

    每种ByteBuf都有相应的分配器ByteBufAllocator,类似工厂模式.我们先学习UnpooledHeapByteBuf与其对应的分配器UnpooledByteBufAllocator 如何 ...

  7. Lombock原理

    说道Lombok,可能会鲜为人知.但是在实际的开发中,它起到了很大的作用,话不多说,直入正题: 一.Lombok是什么 现在看一下Lombok官方对其进行的解释:Lombok官网:https://pr ...

  8. Ionic 包名修改 步骤

    1.config.xml => <widget id=...... 2.plugin 中 android.json 里面package 3.platforms\android 里面 and ...

  9. 从web.xml入手分析jeecms配置文件

      web.xml文件是web系统的核心配置文件,里面的所有配置都会加载的运行时的web容器,从她可以了解到整个web项目的配置情况.jeecms的所有配置文件都在config文件夹下面,通过web. ...

  10. 【DM642学习笔记二】dsp基础实验：发光二级管的显示 led.c

    1,OSDFPGA配置一个专用的8位寄存器控制指示灯亮灭,访问地址为90080017h,由电路图可知低电平点亮. 2,程序运行时,可直接editmemory.即修改90080017h地址的值(可在Ed ...