首页
所有分类
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 相关文章推荐
xml转json的js代码
Aug 28 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
React 高阶组件HOC用法归纳
Jun 13 Javascript
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
秘鲁购物网站(1) 新西兰购物网站(42) 匈牙利购物网站(11) 捷克购物网站(26) 巴基斯坦购物网站(2) 菲律宾购物网站(13) 卡塔尔购物网站(3) 北美洲购物网站(1) 智利购物网站(5) 沙特阿拉伯购物网站(9)
You might like
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHP错误处理函数
2016/04/03 PHP
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
jQuery实现的多滑动门，多选项卡效果代码
2016/03/28 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
jquery实现跳到底部，回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
Vue切换div显示隐藏,多选，单选代码解析
2020/07/14 Javascript
详解Python发送邮件实例
2016/01/10 Python
Python数据类型详解（三）元祖：tuple
2016/05/08 Python
python enumerate函数的使用方法总结
2017/11/15 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
Scholastic父母商店：儿童书籍
2017/01/01 全球购物
澳大利亚珍珠首饰购物网站：Vayo Pearls
2019/03/11 全球购物
Made in Design意大利：现代家具、名家灯具和装饰
2020/10/27 全球购物
学生自我鉴定范文
2013/10/04 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
电子信息工程自荐信
2014/05/26 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2014年行政工作总结
2014/11/19 职场文书
四年级学生期末评语
2014/12/26 职场文书
人工作失职检讨书
2015/05/05 职场文书
检举信的写法
2019/04/10 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
Python 如何解决稀疏矩阵运算
2021/05/26 Python
用python修改excel表某一列内容的操作方法
2021/06/11 Python
如何利用React实现图片识别App
2022/02/18 Javascript