功能要求将一批标记点加入地图,点击其中任意一个点,地图弹出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
相关推荐
百度地图上展示多个marker的同时,能展示多个infowindow,避免只有最后一个infowindow能展示的问题。 博客地址:http://blog.csdn.net/qq_19666821/article/details/70195267
完美解决百度地图聚合中的marker添加label后移动、放大缩小时label消失的问题,添加获取已经聚合点位的接口!
html读取json数据百度地图api加载json数据加载marker图标
使用百度地图api绘制热力图,并使用百度地图提供的Label结合Echarts,对地图标注点marker进行自定义提示的实例源代码
亲测好用的百度地图海量marker性能优化,包括重写的百度方法以及个人心得
百度地图marker动画的实现,动画是基于css3的animation实现的,可以根据需求的不同修改乘不同的动画效果
基于百度地图SDK ,实现仿滴滴打车对地图的操作,即标记物Marker(覆盖物)不随地图的移动而移动。包括两部分功能:(1)传入地址比如北京市海淀区五道口地铁站,会在地图上地位,(2)监测到地图移动完成之后,显示...
本离线开发包,支持百度地图离线开发。用于无网络环境下的百度地图二次开发。 包含以下文件: 1,基础API:apiv1.3.min.js ,有注释可参考; 2,基础CSS: bmap.css ; 3,依赖文件:map,oppc,tile,control,marker; 4...
查了很多资料也看源码,总结了一下,动态改变标注的位置就类似于路书而且运动速度和轨迹可以随意控制,高速运动的标注也可以触发点击事件,添加多个互不影响其它标注和地图性能,可参考百度地图API 移动的marker,...
利用百度地图api,ThinkPHP5后台框架模拟数据,多个marker展示,marker窗口信息,点聚合
百度地图:Marker+定位到当前位置+计算两个坐标的距离+单击marker事件
百度地图标注api在地图上选择地址后获取地址和坐标,在marker标注上添加注释在百度地图容器中创建一个地图将地址解析结果显示在地图上,并调整地图视野/启用地图拖拽事件,默认启用(可不写)启用地图滚轮放大缩小启用...
百度map,百度map API,百度地图 实现百度地图动态搜索、静态地图动态插入 mygw@163.com js 内容如下: /** 加载地图的主控类 */ var MapControl={ staticWith : 512,//链接静态图宽度 staticHeight : 320,/...
百度地图API详解之事件机制,闭包机制,marker事件,信息窗口,叠加层 ,包括marker 的点击前后坐标不同的问题,都有完美的解决方案
这是原文http://blog.csdn.net/android_upl/article/details/78647147
让百度地图只显示你想要的行政区,而将无关的区域进行隐藏。这样会让界面简介许多。echrts虽然也能做,但是百度已经不提供相关的数据下载了,同时echarts不能提供许多百度地图的特性。
android版百度地图自定义Marker
高德地图将带有自定义的图片的marker用连线连起来
这个框架可以在地图上的marker上显示多个infoWindow(高德默认只能同时显示一个infoWindow) 效果图如下: 使用 !!!!! 请在使用前 将高德地图的sdk加到工程中 allprojects { repositories { ... maven { url '...