<!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. redhat4.4下安装GMT4.5.11

    GMT是地学界常用的开源软件,不仅是因为其开源的特性,还有着独特的魅力. 所需要的软件如下 安装步骤: 1. Put the soft packages in one folder, i.e. /ho ...

  2. python 将值相同的key分组的方法

    方法一: 使用 itertools.groupby() rows = [ {'address': '5412 N CLARK ', 'date ': '07/12/2012 ’ }, {'addres ...

  3. #iOS问题记录# 频繁触发viewDidLayoutSubviews的问题

    问题描述: 最近使用给Flutter团队写view组件的时候,出现了触发Widget的频繁build的问题. 问题排查: Flutter的同事提到在flutter层,是因为 updateViewpor ...

  4. vue:父子组件间通信，父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  5. python基础-递归

    1.递归调用:在一个函数调用的过程中,直接或间接又调用了自身,就是递归调用 2.递归必备的两个阶段:1.递推  2.回溯 总结:#总结递归的使用: 1. 必须有一个明确的结束条件2. 每次进入更深一层 ...

  6. 跟我一起学习webpack(一)

    跟我一起打包我们的第一个应用 第一步安装webpack 接下来我们新建文件 //add-content.js export default function(){ document.write('he ...

  7. 在mac下怎么配置web环境（php)

    1, 安装PHP+apach+mysql(xampp) 2, 在目录下建一个新文件夹   : 我是在Users/个人目录/workspace 3, 打开/Applications/XAMPP/xamp ...

  8. Odoo文档管理/知识管理应用实践 - 上传附件

    测试环境: Odoo8.0 Odoo中的文档管理/知识管理可用于保存采购.销售.生产等一系列业务流程中产生的文件.凭证,可关联到具体的每一笔业务操作:也能用于管理公司的合同.资料,创建知识库以分享内部 ...

  9. webstorm激活破解方法

    注册时,在打开的License Activation窗口中选择“License server”,在输入框输入下面的网址: http://idea.imsxm.com/ 点击:Activate即可. 如 ...

  10. js/jquery判断一个对象是否为空

    一.js判断一个对象是否为空对象 1)通过JSON自带的.stringify方法来判断 //JSON自带的stringify方法,将json转成json字符串 var c = {}; if(JSON. ...