首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于OL2实现百度地图ABCD marker的效果

Posted in Javascript onOctober 01, 2015

本文概述：

上文中提到了在Arcgis for JS中实现百度地图ABCD的marker效果，在本文，讲述如何在OpenLayers2中实现类似的效果。

效果图展示如下：

为直观期间，先将效果贴出来。

基于OL2实现百度地图ABCD marker的效果

基于OL2实现百度地图ABCD marker的效果

联动展示

思路：

1、列表与地图的互动

鼠标经过列表时，修改列表图标，并根据列表返回的值在地图上绘蓝色的marker；鼠标移出，修改列表图标为红色，清空地图marker图层。

关键代码：

title.on("mouseover",function(){ 
  var i = $(this).attr("i"); 
  $("#img"+i).attr("src","img/blue.png"); 
  var data = $(this).data("attr"); 
  var hpt = new OpenLayers.LonLat(data.x,data.y); 
  var hicon = new OpenLayers.Icon('img/blue.png',size,offset); 
  hMarker = new OpenLayers.Marker(hpt,hicon); 
  markerLyr.addMarker(hMarker); 
  showName(hpt,data.name,"item-label-name"); 
}); 
title.on("mouseout",function(){ 
  var i = $(this).attr("i"); 
  $("#img"+i).attr("src","img/red.png"); 
  markerLyr.removeMarker(hMarker); 
  hlabelLyr.clear(); 
}); 
title.on("click",function(){ 
  var data = $(this).data("attr"); 
  showInfowindow(data.name,data.desc); 
});

2、地图与列表的互动

鼠标经过地图红色的marker时，修改对应列表图标，并将红色 marker的图片换成蓝色的；鼠标移出，修改对应列表图标，并修改marker为红色。

关键代码：

marker.events.register("click", feature, function(e){ 
  var data = e.object.attr; 
  showInfowindow(data.name,data.desc); 
}); 
marker.events.register("mouseover", feature, function(e){ 
  map.layerContainerDiv.style.cursor = "pointer"; 
  var id= e.object.id; 
  $("#img"+id).attr("src","img/blue.png"); 
  $("#li"+id).css("background","#f2f2f2"); 
  var data = e.object.attr; 
  var hpt = new OpenLayers.LonLat(data.x, data.y); 
  showName(hpt,data.name,"item-label-name-map"); 
}); 
marker.events.register("mouseout", feature, function(e){ 
  map.layerContainerDiv.style.cursor = "url(" 
    + OpenLayers.Util.getRootPath() 
    + "img/pan.cur),default"; 
  var id= e.object.id; 
  $("#img"+id).attr("src","red.png"); 
  $("#li"+id).css("background","#ffffff"); 
  hlabelLyr.clear(); 
}); 
markerLyr.addMarker(marker); 
var label = new OpenLayers.Label(pt,i+1,"item-label"); 
labelLyr.add(label);

3、地图上的1,2,3,4...等数字是一个label图层，不参与联动；

4、数据以JSON的形式传递，在本实例中，根据地图的四至动态生成的，如下：

function getRandomXY(){ 
  var json = new Array(); 
  for(var i=0;i<8;i++){ 
    var w = bounds.getWidth(); 
    var h = bounds.getHeight(); 
    var x = Math.random() * w + bounds.left; 
    var y = Math.random() * h + bounds.bottom; 
    json.push({ 
      id:i, 
      name:"name"+i, 
      desc:"this is the name"+i, 
      x:x, 
      y:y 
    }) 
  } 
  return json; 
}

完整代码如下：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title>openlayers map</title> 
  <link rel="stylesheet" type="text/css" href="http://localhost/olapi/theme/default/style.css"/> 
  <style> 
    html, body, #map{ 
      padding:0; 
      margin:0; 
      height:100%; 
      width:100%; 
      overflow: hidden; 
      font-size: 12.5px; 
      font-family:"宋体" 
    } 
    .item-list{ 
      position: absolute; 
      top:100px; 
      left: 20px; 
      z-index: 999; 
      border: 1px solid #ccc; 
      width: 200px; 
      background: #fff; 
    } 
    .list-close{ 
      background: url("img/panel_tools.png"); 
      width: 16px; 
      height: 16px; 
      float: right; 
      margin: 3px 3px; 
      background-position: -16px 0px; 
    } 
    .list-close:hover{ 
      cursor: pointer; 
    } 
    .list-title{ 
      background: #009dda; 
      color: #fff; 
      padding: 5px 8px; 
      font-weight: bold; 
    } 
    ul{ 
      list-style: none; 
      margin: -0px 0; 
    } 
    ul li{ 
      border-bottom: 1px dotted #eee; 
      margin-left: -40px; 
      margin-top: 5px; 
      position: relative; 
    } 
    ul li:hover{ 
      background: #f2f2f2; 
    } 
    .item{ 
      padding: 2px 5px; 
    } 
    .item:hover{ 
      cursor: pointer; 
    } 
    .item-num{ 
      position: absolute; 
      top: 4px; 
      left: 12px; 
      color:#fff; 
      font-size: 15px; 
      font-weight: bold; 
    } 
    .item-title{ 
      float: right; 
      font-weight: bold; 
      margin-right: 10px; 
    } 
    .item-content{ 
      padding: 3px 5px; 
    } 
    .item-detail{ 
      margin: 3px 5px; 
      float: right; 
    } 
    .item-detail:hover{ 
      text-decoration: underline; 
      color: #01A4F8; 
      cursor: pointer; 
    } 
    .item-label{ 
      color:#fff; 
      font-size: 15px; 
      font-weight: bold; 
      margin-top: 2px; 
      margin-left: 7px; 
    } 
    .item-label-name,.item-label-name-map{ 
      border:1px solid #a6c9e2; 
      background: #fff; 
      padding: 3px 5px; 
      font-size: 12px; 
      margin-top: 23px; 
      margin-left: 15px; 
      border-radius: 5px; 
    } 
    .item-label-name-map{ 
      margin-left: 25px; 
    } 
  </style> 
  <!--引入jquery 库 --> 
  <script type="text/javascript" src="http://localhost/olapi/OpenLayers.js"></script> 
  <script type="text/javascript" src="http://localhost/olapi/lib/OpenLayers/Lang/zh-CN.js"></script> 
  <script src="http://localhost/jquery/jquery-1.8.3.js"></script> 
  <script src="extend/LabelLayer.js"></script> 
  <script> 
    var map; 
    var tiled; 
    $(window).load(function() { 
      var bounds = new OpenLayers.Bounds( 
          87.57582859314434, 19.969920291221204, 
          126.56713756740385, 45.693810203800794 
      ); 
      var options = { 
        controls: [], 
        maxExtent: bounds, 
        maxResolution: 0.1523098006807012, 
        projection: "EPSG:4326", 
        units: 'degrees' 
      }; 
      map = new OpenLayers.Map('map', options); 
      map.addControl(new OpenLayers.Control.Zoom()); 
      map.addControl(new OpenLayers.Control.Navigation()); 
      map.addControl( new OpenLayers.Control.MousePosition()); 
      var tiled = new OpenLayers.Layer.WMS( 
          "province", "http://localhost:8088/geoserver/lzugis/wms", 
          { 
            "LAYERS": 'province', 
            "STYLES": '', 
            format: 'image/png' 
          }, 
          { 
            buffer: 0, 
            displayOutsideMaxExtent: true, 
            isBaseLayer: true, 
            yx : {'EPSG:4326' : true} 
          } 
      ); 
      var markerLyr = new OpenLayers.Layer.Markers("marker"); 
      var labelLyr = new OpenLayers.Layer.Labels("label"); 
      var hlabelLyr = new OpenLayers.Layer.Labels("hlabelLyr"); 
      map.addLayers([tiled,markerLyr,labelLyr,hlabelLyr]); 
      map.zoomToExtent(bounds); 
 
      var data = getRandomXY(); 
      console.log(data); 
      var ul = $("#items"); 
      var size = new OpenLayers.Size(24,26); 
      var offset = new OpenLayers.Pixel(0, 0); 
      var hMarker=null; 
      for(var i=0;i<data.length;i++) { 
        /** 
         * 地图内容 
         */ 
        var pt = new OpenLayers.LonLat(data[i].x, data[i].y); 
        var icon = new OpenLayers.Icon('img/red.png',size,offset); 
        var feature = new OpenLayers.Feature(markerLyr, 
            pt, 
            {'icon': icon,'attr':data[i]}); 
        var marker = feature.createMarker(); 
        marker.attr = data[i]; 
        marker.id = i; 
        marker.events.register("click", feature, function(e){ 
          var data = e.object.attr; 
          showInfowindow(data.name,data.desc); 
        }); 
        marker.events.register("mouseover", feature, function(e){ 
          map.layerContainerDiv.style.cursor = "pointer"; 
          var id= e.object.id; 
          $("#img"+id).attr("src","img/blue.png"); 
          $("#li"+id).css("background","#f2f2f2"); 
          var data = e.object.attr; 
          var hpt = new OpenLayers.LonLat(data.x, data.y); 
          showName(hpt,data.name,"item-label-name-map"); 
        }); 
        marker.events.register("mouseout", feature, function(e){ 
          map.layerContainerDiv.style.cursor = "url(" 
            + OpenLayers.Util.getRootPath() 
            + "img/pan.cur),default"; 
          var id= e.object.id; 
          $("#img"+id).attr("src","red.png"); 
          $("#li"+id).css("background","#ffffff"); 
          hlabelLyr.clear(); 
        }); 
        markerLyr.addMarker(marker); 
        var label = new OpenLayers.Label(pt,i+1,"item-label"); 
        labelLyr.add(label); 
        /** 
         * 列表内容 
         */ 
        var li = $("<li />").attr("id","li"+i).appendTo(ul); 
        var title = $("<div />").addClass("item").attr("i",i).data("attr",data[i]); 
        var img = $("<img />").attr("id","img"+i).attr("src", "img/red.png")/*.attr("width", "16").attr("height", "18")*/; 
        var num = $("<a />").addClass("item-num").html(i+1); 
        var name = $("<div />").addClass("item-title").html(data[i].name); 
        title.append(img).append(num).append(name); 
        var content = $("<a />").addClass("item-content").html(data[i].desc); 
        var detail = $("<a />").addClass("item-detail").html("详细>>"); 
        li.append(title).append(content).append(detail); 
        title.on("mouseover",function(){ 
          var i = $(this).attr("i"); 
          $("#img"+i).attr("src","img/blue.png"); 
          var data = $(this).data("attr"); 
          var hpt = new OpenLayers.LonLat(data.x,data.y); 
          var hicon = new OpenLayers.Icon('img/blue.png',size,offset); 
          hMarker = new OpenLayers.Marker(hpt,hicon); 
          markerLyr.addMarker(hMarker); 
          showName(hpt,data.name,"item-label-name"); 
        }); 
        title.on("mouseout",function(){ 
          var i = $(this).attr("i"); 
          $("#img"+i).attr("src","img/red.png"); 
          markerLyr.removeMarker(hMarker); 
          hlabelLyr.clear(); 
        }); 
        title.on("click",function(){ 
          var data = $(this).data("attr"); 
          showInfowindow(data.name,data.desc); 
        }); 
      } 
 
      $(".item-list").draggable({ 
        handle:'.list-title' 
      }); 
      $("#close").on("click",function(){ 
        $(".item-list").hide(); 
      }); 
 
      function showName(pt,name,classname){ 
        var label = new OpenLayers.Label(pt,name,classname); 
        hlabelLyr.add(label); 
      } 
      function showInfowindow(title,content){ 
        $("<div />").window({ 
          width:200, 
          height:80, 
          modal:true, 
          maximizable:false, 
          minimizable:false, 
          collapsible:false, 
          closable:true, 
          title:title, 
          content:content 
        }); 
      } 
 
      function getRandomXY(){ 
        var json = new Array(); 
        for(var i=0;i<8;i++){ 
          var w = bounds.getWidth(); 
          var h = bounds.getHeight(); 
          var x = Math.random() * w + bounds.left; 
          var y = Math.random() * h + bounds.bottom; 
          json.push({ 
            id:i, 
            name:"name"+i, 
            desc:"this is the name"+i, 
            x:x, 
            y:y 
          }) 
        } 
        return json; 
      } 
    }); 
  </script> 
</head> 
<body> 
<div id="map"></div> 
  <div class="item-list"> 
    <div id="close" class="list-close"></div> 
    <div class="list-title">结果列表</div> 
    <ul id="items"> 
    </ul> 
  </div> 
</body> 
</html>

在本实例中，扩展了OpenLayers的图层Labels和对象Label。

以上就是本文全部叙述，希望大家喜欢。

基于OL2实现百度地图ABCD marker的效果

- Author -

LZU-GIS

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
javascript三种代码注释方法
Jun 02 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
Vue.js基础知识小结
Jan 13 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
移动端自适应flexible.js的使用方法(不用三大框架，仅写一个单html页面使用）推荐
Apr 02 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
JS处理json日期格式化问题
Oct 01 #Javascript
JS日期格式化之javascript Date format
Oct 01 #Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 #Javascript
RequireJS入门一之实现第一个例子
Sep 30 #Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 #Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 #Javascript
浅谈Javascript中substr和substring的区别
Sep 30 #Javascript
代理(2) #{}(1) 图片模糊(1) 克隆(1) 选择器(1) 外键(1) canvas(2) 增删查改(1) 脏读(2) SQL注入(2)
You might like
php数组指针操作详解
2017/02/14 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
Javascript 二维数组
2009/11/26 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
vue更改数组中的值实例代码详解
2020/02/07 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
通过实例解析Python调用json模块
2019/12/11 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
图库照片、免版税图片、矢量艺术、视频片段：Depositphotos
2019/08/02 全球购物
自荐书模板
2013/12/19 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
学校后勤岗位职责
2014/02/19 职场文书
大课间体育活动方案
2014/03/12 职场文书
公司年会策划方案
2014/05/17 职场文书
爱护公物标语
2014/06/24 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
确保减税降费落地生根，用实实在在措施
2019/07/19 职场文书
修辞手法有哪些？
2019/08/29 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
Java实现简易的分词器功能
2021/06/15 Java/Android
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis