基于ol2实现百度地图abcd marker的效果_H5之家 - 中国HTML5教程资源分享第一站

基于ol2实现百度地图abcd marker的效果

【】

本文概述：

上文中提到了在arcgis for js中实现百度地图abcd的marker效果，在本文，讲述如何在openlayers2中实现类似的效果。

效果图展示如下：

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

联动展示

思路：

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的形式传递，在本实例中，根据地图的四至动态生成的，如下：

完整代码如下：

<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title>openlayers map</title> <link 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>  <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></div> <div> <div></div> <div>结果列表</div> <ul> </ul> </div> </body> </html>

在本实例中，扩展了openlayers的图层labels和对象label。

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

您可能感兴趣的文章:

基于arcgis for javascript实现百度地图abcd marker的效果