`

百度地图API中不同marker的InfoWindow的显示内容不同的实现

 
阅读更多

功能要求将一批标记点加入地图,点击其中任意一个点,地图弹出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数组里面最后一个数组的元素的相应信息百度地图API中不同marker的InfoWindow的显示内容不同的实现

    上网查了一下,没有人给出具体解决,只是提出了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
分享到:
评论

相关推荐

    完美解决百度地图聚合中的marker添加label后移动、放大缩小时label消失的问题

    在使用百度地图API进行开发时,经常会遇到一个问题:在实现地图上的marker聚合功能时,当marker数量过多,为了提高用户体验,我们会使用聚合技术将多个marker合并为一个大的标记点。然而,一旦添加了label(标记文字...

    百度地图V3.6.0系列——覆盖物和InfoWindow

    然后,InfoWindow是百度地图API中的信息窗口组件,用于在地图上显示详细信息。当用户点击覆盖物时,InfoWindow可以弹出包含相关数据的窗口。创建和使用InfoWindow的步骤包括: 1. 创建InfoWindow对象:你可以提供...

    百度地图API显示多个标注点信息

    本文将深入探讨如何使用百度地图API显示多个标注点,并结合jQuery库来优化用户体验。 首先,百度地图API(Baidu Maps API)是百度公司提供的一项免费服务,它允许开发者在其网站上集成地图功能,包括定位、地图展示...

    百度地图的安卓移动端demo-InfoWindow

    本文将详细讲解如何在Android应用中使用百度地图API来实现InfoWindow功能,以及通过提供的"百度地图的安卓移动端demo-InfoWindow"进行学习和调试。 InfoWindow在百度地图中通常被称为信息窗口,它是在地图上某个...

    百度地图API同时显示多个标记,可标记自己的所有分公司

    在使用百度地图API时,有时候我们需要在地图上同时显示多个标记,例如标记公司的各个分公司位置。这不仅可以方便用户快速找到各个分公司的地理位置,还可以通过点击标记弹出简介或链接到对应的分公司网站,提供更...

    百度地图自定义大头针(Marker)、自定义信息窗口(InfoBox)

    百度地图API提供了BMap.InfoWindow类用于创建信息窗口,但要自定义样式和内容,我们需要引入BMapLib库中的InfoBox模块。以下是一个基本示例: ```javascript var content = ';"&gt;你的自定义内容&lt;/div&gt;'; // 设置...

    百度地图api实现运动轨迹、坐标拾取、多点标注并显示信息窗体

    在百度地图API中,这可以通过`InfoWindow`类来实现。我们可以根据需要改变信息窗口的内容、样式或行为,例如根据用户的操作状态(如点击、悬停)显示不同内容的窗口。这可以通过设置`InfoWindow`的`content`属性和`...

    百度地图API详解之事件机制,闭包机制,marker事件,信息窗口,叠加层

    3. **marker事件**:在百度地图API中,Marker对象代表地图上的一个标记,可以监听其各种事件,如`click`、`dragstart`、`dragend`等,以实现对用户交互的响应。例如,监听`click`事件可以打开信息窗口显示相关信息。...

    百度地图多个marker+窗口信息+聚合

    综上所述,这个项目结合了前后端开发技术,通过百度地图API实现了在地图上展示多个地点、为每个地点添加信息窗口,并且在地点密集时采用点聚合优化显示效果。对于想学习或提升地图应用开发技能的开发者来说,这是一...

    百度地图api实现部分功能,根据多个坐标连成轨迹、坐标拾取、实现多个标注点并带信息窗口

    在本文中,我们将深入探讨如何使用百度地图API来实现一系列关键功能,包括连接多个坐标以形成轨迹、坐标拾取、以及创建带有信息窗口的多个标注点。这些功能在Web应用开发、JavaScript工具包、企业应用以及GIS/地图/...

    利用百度ApI实现自己的地图

    在IT行业中,地图API是开发地理位置相关应用的重要工具,而百度地图API提供了一系列丰富的服务,帮助开发者轻松构建地图功能。本篇内容将详细探讨如何利用百度API实现自己的地图应用。 首先,我们要了解什么是百度...

    baidu.map.rar_地图API_百度 map_百度API_百度地图_百度地图API

    百度地图API是百度提供的一套强大的Web服务接口,它允许开发者在其网站或应用中嵌入地图功能,实现各种地图相关的定制化操作。 首先,我们要了解什么是地图API。API(Application Programming Interface)是应用...

    Android 百度地图 SDK v3.0.0 (三) 添加覆盖物Marker与InfoWindow的使用

    本教程将详细介绍如何在Android应用中使用百度地图SDK v3.0.0来添加覆盖物Marker以及创建InfoWindow,以此来增强地图的交互性和信息展示。 首先,我们需要在项目中引入百度地图SDK。这通常涉及到在`build.gradle`...

    Flutter集成百度地图api 这个demo是Flutter项目集成百度地图api 显示地图

    在本文中,我们将深入探讨如何在Flutter应用中集成百度地图API,以便显示地图。Flutter是一种由Google开发的开源UI工具包,用于构建高性能、高保真、多平台的应用程序。而百度地图API则是提供地图服务的接口,适用于...

    百度地图类库 自定义信息窗口

    在百度地图API中,InfoWindow是一种默认的弹出式窗口,用于展示地图上的标记点(Marker)或其他地理信息。然而,InfoWindow的样式和功能相对固定,有时无法满足开发者对个性化和扩展性的需求。因此,百度地图提供了...

    百度地图自定义Marker(android)

    在Android开发中,百度地图API提供了丰富的功能,其中包括自定义Marker。Marker是地图上的一个标记,通常用于表示特定的位置或信息。本项目聚焦于在Android平台上如何利用百度地图SDK实现自定义Marker,以满足个性化...

    jQuery实现百度地图api选择城市地图效果

    在这个场景下,"jQuery实现百度地图api选择城市地图效果"是一个常见的需求,它主要用于让用户能够方便地选择他们所在的城市或者感兴趣的城市。这个话题涉及到jQuery库的使用以及百度地图API的集成,下面将详细解释这...

    百度地图自定义跳动的点,当有数据更新时提示加(增加的量)

    在百度地图API中,可以通过`BMap.Marker`类来创建标记,并通过设置其位置属性来确定它在地图上的坐标。我们可以自定义标记的图标,以达到“跳动”的效果。这通常涉及到CSS动画或者JavaScript的定时器函数。 要实现...

    ASP.NET调用百度地图API实例

    ASP.NET调用百度地图API实例是一个典型的Web应用开发案例,主要涉及了两个核心技术:ASP.NET框架和百度地图API。这个实例中,开发者利用ASP.NET的网页编程能力结合百度地图的JavaScript API,实现了动态地在网页上...

    【百度地图API】如何自定义地图图层?

    下面将详细讲解如何利用百度地图API实现自定义地图图层,以及如何添加标记、搜索自定义标记以及显示路线方案。 1. **创建自定义图层** 百度地图API提供了`BMap.MapType`对象,通过这个对象我们可以设置地图显示的...

Global site tag (gtag.js) - Google Analytics