<!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. @RestControllerAdvice作用及原理

    原文:Spring Boot 系列(八)@ControllerAdvice 拦截异常并统一处理 在spring 3.2中,新增了@ControllerAdvice 注解,可以用于定义@Exceptio ...

  2. ES6之主要知识点(五）函数

    函数参数的默认值 作用域 ; function f(x, y = x) { console.log(y); } f() let x = ; function f(y = x) { let x = ; ...

  3. 关于大数据平台ETL可行性方案

    今年做过两个公司需求都遇到了实时流入hive的需求,storm入hive有几种可行性方案. 1.storm直接写入hive,storm下面有个stormhive的工具包,可以进行数据写入hive.但是 ...

  4. Java实现数字大写转换

    需求如下:用json读取后台工时信息,比如23.5小时,需要通过编码将其转换为贰拾叁点伍 比如23.23之前有对Stringl类型强转为Double在转为整型,发生了精度丢失,后来想想对小数点进行分割 ...

  5. xshell上传文件到linux

    z,sz是Linux/Unix同Windows进行ZModem文件传输的命令行工具. 优点就是不用再开一个sftp工具登录上去上传下载文件. sz:将选定的文件发送(send)到本地机器 rz:运行该 ...

  6. 分享非常漂亮的WPF界面框架源码及插件化实现原理

      在上文<分享一个非常漂亮的WPF界面框架>中我简单的介绍了一个界面框架,有朋友已经指出了,这个界面框架是基于ModernUI来实现的,在该文我将分享所有的源码,并详细描述如何基于Mod ...

  7. Delphi 设计模式：《HeadFirst设计模式》Delphi代码---模式小结之一个叫声接口和几只鸭子[转]

    一.一个叫声接口和几只鸭子 从一个叫声接口开始. {<HeadFirst设计模式>Delphi代码之模式小结 } { 一个叫声接口                            } ...

  8. 前端算法题：找出数组中第k大的数字出现多少次

    题目:给定一个一维数组,如[1,2,4,4,3,5],找出数组中第k大的数字出现多少次. 例如:第2大的数是4,出现2次,最后输出 4,2 function getNum(arr, k){ // 数组 ...

  9. Chapter 1 线性表

    Preface: 这部分主要是我考研之前的总结,留作以后用到时再翻出来看看.都是基础的知识点,望各(Da)位(Lao)不喜勿喷,欢迎指正. 适用人群:考研复习过一遍数据结构的,可以看看,查漏补缺(顺便 ...

  10. hbase连接linux开发过程

    最近近公司被安排做hbase开发,太久没做今天记录下过程 import java.io.IOException; import org.apache.hadoop.conf.Configuration ...