<!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. linux 备份最近一天的文件

    #!/bin/bash #备份在最近一天修改的文件 #date 获取日期 +%Y-%m-%d 设置日期格式为yyyy-mm-dd的形式 BACKFILE=backup-$(date +%Y-%m-%d ...

  2. wpf中数据绑定和INotifyPeropertyChanged的理解

    原创:转载请注明出处. 先说数据绑定: XAML代码: <Window x:Class="数据绑定和INotifyPropertyChanged.Window1" Loade ...

  3. 如何在easyui datagrid 中显示外键的值

    1.需要在角色列表显示角色类别的值,而角色类别是外键,关联数据字典,明细见下图: 2.代码如下: columns: [[ { field: 'ck', checkbox: true, align: ' ...

  4. mysql 中将汉字(中文)按照拼音首字母排序

    因为数据库中可以设定表的编码格式,不同编码格式下,中文的排序有区别,下面分别介绍常用编码下的排序方法. 1.如果数据表的某字段的字符编码是 utf8_general_ci,排序写法: ORDER BY ...

  5. 备份和恢复MySQL数据库

    一.备份 1) 备份表mysqldump -uroot -p 库名 表1 > e:\backup.sqlmysqldump -uroot -p 库名 表1 表2 表3 > e:\backu ...

  6. python 解决抓取网页中的中文显示乱码问题

    关于爬虫乱码有很多各式各样的问题,这里不仅是中文乱码,编码转换.还包括一些如日文.韩文 .俄文.藏文之类的乱码处理,因为解决方式是一致的,故在此统一说明. 网络爬虫出现乱码的原因 源网页编码和爬取下来 ...

  7. idea永久使用本地的maven设置

    1.要想是永久的,就选择other settings

  8. javascript的Touch事件

    js的touch事件,一般用于移动端的触屏滑动 $(function(){document.addEventListener("touchmove", _touch, false) ...

  9. 88 Lowest Common Ancestor of a Binary Tree

    原题网址:https://www.lintcode.com/problem/lowest-common-ancestor-of-a-binary-tree/description 描述 给定一棵二叉树 ...

  10. xml文件节点读取时，selectNodes总是在根节点下查找的问题

    参考:https://yq.aliyun.com/articles/39543 SAXReader reader = new SAXReader();Document document = reade ...