后使用快捷导航没有帐号？
暂时没有人问过相似的问题，你可以做第一个提问题的人
查看: 4723|回复: 8
如何获取地图上marker？如何代码模拟click事件？
用addOverlay 添加了不少marker到地图上，可以用getOverlays获取所有覆盖物，但是返回的overlay就只有几个方法
请问，既然是把marker加到地图上，怎么获取？
另外在添加marker的时候注册了click事件，click事件可以打开对应的信息窗；
请问可以通过JS代码来模拟click事件实现信息窗打开么？直接用marker.click()行不通》。。。。。。。
在添加marker时附加一个id属性
获取marker时
var markers = map.getOverlays();
& && && && &for (var i = 0; i & markers. i++) {
& && && && && & if (markers[i].toString() == &[object Marker]&) {
& && && && && && &&&if (markers[i].id == 你附加的id属性值) {
& && && && && && && && &处理自己的业务
& && && && && && &&&}
& && && && && & }
& && && && &}
我也遇到了getOverlays（）这个问题，请问楼主解决了吗？
我也遇到了getOverlays（）这个问题，请问楼主解决了吗？
用个数组 缓存 你当前地图上所有的mardker，用索引获取marker。
& & 能说清楚点吗 ？ 我现在就这问题很迷茫
下面搞定这个事情：
//添加一个模拟打开窗口的方法,调用：marker.openMyInfoWindow();
BMap.Marker.prototype.openMyInfoWindow=function(){
& & & & for(key in this){
& & & & & & & & if($(this[key]).hasClass(&BMap_noprint&)){
& & & & & & & & & & & & $(this[key]).trigger(&click&);
& & & & & & & & & & & &
& & & & & & & & }
在添加marker时附加一个id属性
获取marker时
var markers = map.getOverlays();
你好啊，属性怎样添加诶，直接用marker.id=id?
Powered by声明：转载自
这几天做了个关于百度地图的小项目，之前用的google地图，百度地图的api有些地方设计的还是比较诡异的，在这里说一下其中的两个小地方。
第一个是使用LocalSearch时，要获取显示在地图上的所有Marker，百度地图提供了这样一个函数
这个函数在所有Marker被添加后调用，要取得这些Marker，在这里面进行修改，比如设置监听器是个不错的选择，描述里说明可以通过LocalResultPoi对象的marker属性，不过我们查阅API会发现，LocalResultPoi对象根本就没有marker这个属性，其实确实是没有，但在这里也是可以直接用的：
local.setMarkersSetCallback(function(pois){
for(var i=0;i&pois.i++){
markerArr[i]=pois[i].
pois[i].marker.addEventListener("infowindowopen", function(e){
//do something
在这里我用一个markerArr数组存下了所有的Marker，并且为每个Marker添加了infowindowopen事件。
第二个问题困扰了我一下午，也没有用我最初的想法解决，我想自定义结果面板，但是仍然想在点击一个地点后，地图上打开对应地点的信息窗，我的最初构想是点击文字后，模拟触发对应Marker的click事件，结果让我愤慨的是，百度地图好像并没有提供模拟触发事件的接口，在网上搜到了一个封装的EventWapper对象，但是也没有起作用，最后无奈之下，只能是利用数据接口自己来实现这个信息窗了：
var local = new BMap.LocalSearch(map, {
renderOptions: {
autoViewport: true,
selectFirstResult: false
onSearchComplete: function(results){
//可以得到搜索结果且搜索结果不为空
if(local.getStatus() == BMAP_STATUS_SUCCESS){
var html="";
//遍历结果第一页的点，自定义结果面板
for (var i = 0; i & results.getCurrentNumPois(); i++){
var poi = results.getPoi(i);
//下面根据LocalResultPoi对象的值拼html代码，此处略
title[i] = poi.
if(poi.address)
address[i] = poi.
if(poi.phoneNumber)
telephone[i] = poi.phoneN
//重新遍历第一页所有点，对结果面板中的每一条记录添加click事件
for (var i = 0; i & results.getCurrentNumPois(); i++){
$("#poi" + i).click(function(){
//这里用前面title、address、telephone三个数组中存放的值来拼信息窗里的html代码，存在变量content中，然后：
var info = new Window(content);
//利用在第一个问题中的markerArr数组设置触发函数，但注意数组的索引值不能用i，因为函数运行时i已不存在，因此在构造结果面板时，每个节点我添加了一个index属性，并用下面的代码获取，设置属性的代码类似于：&div id='poi5' index='5'&&/div&
markerArr[$(this).attr("index")].openInfoWindow(info);
pageCapacity: 8
这个工作在onSearchComplete中完成，关键代码如上
阅读(...) 评论() &博客分类：
功能要求将一批标记点加入地图，点击其中任意一个点，地图弹出InfoWindow框，里面显示与此点相关的内容。 按照常规写了如下代码: var node = function(){
}; addmarks = function(nodes){
var _nodes =
var _markers = new Array();
for(var i=0;i&_nodes.i++){
var _marker = new BMap.Marker(new BMap.Point(_nodes[i].lng, _nodes[i].lat));
var _node = _nodes[i];
var _html = "节点名:"+_node.
_marker.addEventListener("click", function(e){
this.openInfoWindow(Window(_html));
_marker.addEventListener("mouseover", function(e){
this.setTitle("坐标@ "+_node.lng+","+_node.lat);
_markers.push(_marker);
myClusterer = new BMapLib.MarkerClusterer(myMap, {markers:_markers});
myClusterer.setMaxZoom(17);
//myClusterer.setStyles(myStyles); };
上述写法很直观看起来没有问题，但遗憾的是，运行起来后，各个标记点虽然能够根据各自的坐标散布在地图上，但点击每个标记点所弹出的InfoWindow框里的信息则是nodes数组里面最后一个数组的元素的相应信息。
上网查了一下，没有人给出具体解决，只是提出了javascript的闭包来解决。于是采用闭包方式重新写了代码： addmarks = function(nodes){
var _nodes =
var _markers = new Array();
for(var i=0;i&_nodes.i++){
var _html = "节点名:"+_node.
shop_markers.push(createMark(_nodes[i], _html));
myClusterer = new BMapLib.MarkerClusterer(myMap, {markers:shop_markers});
myClusterer.setMaxZoom(17);
//myClusterer.setStyles(myStyles); };
createMark = function(node, info_html){
var _marker = new BMap.Marker(new BMap.Point(node.lng, node.lat));
_marker.addEventListener("click", function(e){
this.openInfoWindow(Window(info_html));
_marker.addEventListener("mouseover", function(e){
this.setTitle("位于: "+node.lng+","+node.lat);
return _ }; 运行后成功。 关于js的闭包
引自博客：
.cn/s/blog_484dekmx.html
浏览: 71438 次
来自: 上海
这个问题是你没有按照官方命令来执行官方文档：$ bin/flu ...
这么好的文章竟然没有评论？果断支持！！
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'基于OL2实现百度地图ABCD marker的效果
作者：LZU-GIS
字体：[ ] 类型：转载 时间：
本文概述：
上文中提到了在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.
showInfowindow(data.name,data.desc);
marker.events.register("mouseover", feature, function(e){
map.layerContainerDiv.style.cursor = "pointer";
var id= e.object.
$("#img"+id).attr("src","img/blue.png");
$("#li"+id).css("background","#f2f2f2");
var data = e.object.
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.
$("#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.
var y = Math.random() * h + bounds.
json.push({
name:"name"+i,
desc:"this is the name"+i,
完整代码如下：
&!DOCTYPE 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"/&
html, body, #map{
padding:0;
height:100%;
width:100%;
font-size: 12.5
font-family:"宋体"
.item-list{
z-index: 999;
border: 1px solid #
width: 200
background: #
.list-close{
background: url("img/panel_tools.png");
height: 16
margin: 3px 3
background-position: -16px 0
.list-close:hover{
.list-title{
background: #009
padding: 5px 8
font-weight:
list-style:
margin: -0px 0;
border-bottom: 1px dotted #
margin-left: -40
margin-top: 5
ul li:hover{
background: #f2f2f2;
padding: 2px 5
.item:hover{
.item-num{
font-size: 15
font-weight:
.item-title{
font-weight:
margin-right: 10
.item-content{
padding: 3px 5
.item-detail{
margin: 3px 5
.item-detail:hover{
text-decoration:
color: #01A4F8;
.item-label{
font-size: 15
font-weight:
margin-top: 2
margin-left: 7
.item-label-name,.item-label-name-map{
border:1px solid #a6c9e2;
background: #
padding: 3px 5
font-size: 12
margin-top: 23
margin-left: 15
border-radius: 5
.item-label-name-map{
margin-left: 25
&!--引入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&
$(window).load(function() {
var bounds = new OpenLayers.Bounds(
87.34, 19.204,
126.85, 45.794
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.7012,
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=
for(var i=0;i&data.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,
{'icon': icon,'attr':data[i]});
var marker = feature.createMarker();
marker.attr = data[i];
marker.id =
marker.events.register("click", feature, function(e){
var data = e.object.
showInfowindow(data.name,data.desc);
marker.events.register("mouseover", feature, function(e){
map.layerContainerDiv.style.cursor = "pointer";
var id= e.object.
$("#img"+id).attr("src","img/blue.png");
$("#li"+id).css("background","#f2f2f2");
var data = e.object.
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.
$("#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.
var y = Math.random() * h + bounds.
json.push({
name:"name"+i,
desc:"this is the name"+i,
&div id="map"&&/div&
&div class="item-list"&
&div id="close" class="list-close"&&/div&
&div class="list-title"&结果列表&/div&
&ul id="items"&
在本实例中，扩展了OpenLayers的图层Labels和对象Label。
以上就是本文全部叙述，希望大家喜欢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具