功能要求将一批标记点加入地图,点击其中任意一个点,地图弹出InfoWindow框,里面显示与此点相关的内容。
按照常规写了如下代码:
var node = function(){
name;
lng;
lat;
};
addmarks = function(nodes){
var _nodes = nodes;
var _markers = new Array();
for(var i=0;i<_nodes.length;i++){
var _marker = new BMap.Marker(new BMap.Point(_nodes[i].lng, _nodes[i].lat));
var _node = _nodes[i];
var _html = "节点名:"+_node.name;
_marker.addEventListener("click", function(e){
this.openInfoWindow(new BMap.InfoWindow(_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 = nodes;
var _markers = new Array();
for(var i=0;i<_nodes.length;i++){
var _html = "节点名:"+_node.name;
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(new BMap.InfoWindow(info_html));
});
_marker.addEventListener("mouseover", function(e){
this.setTitle("位于: "+node.lng+","+node.lat);
});
return _marker;
};
运行后成功。
关于js的闭包参考
lng;
lat;
};
addmarks = function(nodes){
var _nodes = nodes;
var _markers = new Array();
for(var i=0;i<_nodes.length;i++){
var _marker = new BMap.Marker(new BMap.Point(_nodes[i].lng, _nodes[i].lat));
var _node = _nodes[i];
var _html = "节点名:"+_node.name;
_marker.addEventListener("click", function(e){
this.openInfoWindow(new BMap.InfoWindow(_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 = nodes;
var _markers = new Array();
for(var i=0;i<_nodes.length;i++){
var _html = "节点名:"+_node.name;
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(new BMap.InfoWindow(info_html));
});
_marker.addEventListener("mouseover", function(e){
this.setTitle("位于: "+node.lng+","+node.lat);
});
return _marker;
};
运行后成功。
关于js的闭包参考
引自博客:
http://blog.sina.com.cn/s/blog_484d87770101ekmx.html
相关推荐
在使用百度地图API进行开发时,经常会遇到一个问题:在实现地图上的marker聚合功能时,当marker数量过多,为了提高用户体验,我们会使用聚合技术将多个marker合并为一个大的标记点。然而,一旦添加了label(标记文字...
然后,InfoWindow是百度地图API中的信息窗口组件,用于在地图上显示详细信息。当用户点击覆盖物时,InfoWindow可以弹出包含相关数据的窗口。创建和使用InfoWindow的步骤包括: 1. 创建InfoWindow对象:你可以提供...
本文将深入探讨如何使用百度地图API显示多个标注点,并结合jQuery库来优化用户体验。 首先,百度地图API(Baidu Maps API)是百度公司提供的一项免费服务,它允许开发者在其网站上集成地图功能,包括定位、地图展示...
本文将详细讲解如何在Android应用中使用百度地图API来实现InfoWindow功能,以及通过提供的"百度地图的安卓移动端demo-InfoWindow"进行学习和调试。 InfoWindow在百度地图中通常被称为信息窗口,它是在地图上某个...
在使用百度地图API时,有时候我们需要在地图上同时显示多个标记,例如标记公司的各个分公司位置。这不仅可以方便用户快速找到各个分公司的地理位置,还可以通过点击标记弹出简介或链接到对应的分公司网站,提供更...
百度地图API提供了BMap.InfoWindow类用于创建信息窗口,但要自定义样式和内容,我们需要引入BMapLib库中的InfoBox模块。以下是一个基本示例: ```javascript var content = ';">你的自定义内容</div>'; // 设置...
3. **marker事件**:在百度地图API中,Marker对象代表地图上的一个标记,可以监听其各种事件,如`click`、`dragstart`、`dragend`等,以实现对用户交互的响应。例如,监听`click`事件可以打开信息窗口显示相关信息。...
在百度地图API中,这可以通过`InfoWindow`类来实现。我们可以根据需要改变信息窗口的内容、样式或行为,例如根据用户的操作状态(如点击、悬停)显示不同内容的窗口。这可以通过设置`InfoWindow`的`content`属性和`...
综上所述,这个项目结合了前后端开发技术,通过百度地图API实现了在地图上展示多个地点、为每个地点添加信息窗口,并且在地点密集时采用点聚合优化显示效果。对于想学习或提升地图应用开发技能的开发者来说,这是一...
在本文中,我们将深入探讨如何使用百度地图API来实现一系列关键功能,包括连接多个坐标以形成轨迹、坐标拾取、以及创建带有信息窗口的多个标注点。这些功能在Web应用开发、JavaScript工具包、企业应用以及GIS/地图/...
在IT行业中,地图API是开发地理位置相关应用的重要工具,而百度地图API提供了一系列丰富的服务,帮助开发者轻松构建地图功能。本篇内容将详细探讨如何利用百度API实现自己的地图应用。 首先,我们要了解什么是百度...
在百度地图API中,可以通过`BMap.Marker`类来创建标记,并通过设置其位置属性来确定它在地图上的坐标。我们可以自定义标记的图标,以达到“跳动”的效果。这通常涉及到CSS动画或者JavaScript的定时器函数。 要实现...
百度地图API是百度提供的一套强大的Web服务接口,它允许开发者在其网站或应用中嵌入地图功能,实现各种地图相关的定制化操作。 首先,我们要了解什么是地图API。API(Application Programming Interface)是应用...
在百度地图API中,InfoWindow是一种默认的弹出式窗口,用于展示地图上的标记点(Marker)或其他地理信息。然而,InfoWindow的样式和功能相对固定,有时无法满足开发者对个性化和扩展性的需求。因此,百度地图提供了...
在Android开发中,百度地图API提供了丰富的功能,其中包括自定义Marker。Marker是地图上的一个标记,通常用于表示特定的位置或信息。本项目聚焦于在Android平台上如何利用百度地图SDK实现自定义Marker,以满足个性化...
在本文中,我们将深入探讨如何在Flutter应用中集成百度地图API,以便显示地图。Flutter是一种由Google开发的开源UI工具包,用于构建高性能、高保真、多平台的应用程序。而百度地图API则是提供地图服务的接口,适用于...
在这个场景下,"jQuery实现百度地图api选择城市地图效果"是一个常见的需求,它主要用于让用户能够方便地选择他们所在的城市或者感兴趣的城市。这个话题涉及到jQuery库的使用以及百度地图API的集成,下面将详细解释这...
本教程将详细介绍如何在Android应用中使用百度地图SDK v3.0.0来添加覆盖物Marker以及创建InfoWindow,以此来增强地图的交互性和信息展示。 首先,我们需要在项目中引入百度地图SDK。这通常涉及到在`build.gradle`...
ASP.NET调用百度地图API实例是一个典型的Web应用开发案例,主要涉及了两个核心技术:ASP.NET框架和百度地图API。这个实例中,开发者利用ASP.NET的网页编程能力结合百度地图的JavaScript API,实现了动态地在网页上...
下面将详细讲解如何利用百度地图API实现自定义地图图层,以及如何添加标记、搜索自定义标记以及显示路线方案。 1. **创建自定义图层** 百度地图API提供了`BMap.MapType`对象,通过这个对象我们可以设置地图显示的...