js怎么把百度地图的infowindow 高度js改变div的高度

来源：蜘蛛抓取(WebSpider) 时间：2016-04-10 07:18 标签： js 缓慢改变dom高度
百度地图API中不同marker的InfoWindow的显示内容不同的实现
这几天在写一个开发应用中，用到百度地图。功能要求将一批标记点加入地图，点击其中任意一个点，地图弹出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();
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的闭包
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&二次元同好交流新大陆
扫码下载App
汇聚2000万达人的兴趣社区下载即送20张免费照片冲印
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
在初始化地图完成后，我们通过map对象的addEventListener方法添加click事件的监听。凡是在类参考文档中说明某个类具备某些事件时，我们都可以调用该对象的addEventListener方法添加响应的事件监听函数。
上面我们通过传入一个匿名函数添加了事件监听，如果我们需要移除事件监听，则需要将监听函数用具名函数表示：
var clickHandler =function(){
alert('您点击了地图');}map.addEventListener('click', clickHandler);// 后续进行移除map.removeEventListener('click', clickHandler);
和DOM事件类似，在百度地图API的事件机制中也提供了事件参数，参数通过监听函数的参数进行传递，比如我们修改最开始的代码：
map.addEventListener('click', function(e){
alert('点击坐标: '+ e.point.lng +', '+ e.point.lat);});
通过API的类参考文档得知，click事件的参数包含type、target、point和pixel四个属性，上面的示例就是获取了point属性，它表示当前点击的地理位置。
在事件监听中还可以通过this引用触发事件的对象，就像标准的DOM事件一样。
map.addEventListener('dragend', function(e){
alert(this.getCenter());
// 这里的this就是map实例});
闭包是Javascript脚本语言的特性之一，不熟悉它的开发者很可能犯下面这种错误：页面有十个标注（Marker实例），我希望点击不同的标注开启内容不同的信息窗口，每个信息窗口显示该标注的索引（1到10）。首先我们初始化标注实例并存放于数组中：
var markers = [];for (var i =0; i &10; i ++) {
var mkr =new BMap.Marker(new BMap.Point(116.2+ i /20, 39.855), {title: i +1});
markers.push(mkr);
map.addOverlay(mkr);}
我们给每个标注添加自己的title属性以示区分，你将看到如下效果：
下面，我们添加标注的点击事件，用来开启内容不同的信息窗口：
for (i =0; i &10; i ++) {
markers[i].addEventListener('click', function(){
this.openInfoWindow(new Window('我是第'+ (i +1) +'个标注'));
代码看起来没有任何问题，循环遍历markers数组，为每个标注实例绑定click事件，事件处理函数中开启信息窗口并显示是第几个标注。但是通过浏览器看效果的时候却发现问题了：
明明是第三个标注，点击之后的信息窗口中却显示“11”。实际上，当click的监听函数被执行的时候才会去看变量i的值是什么，此时for循环早已经执行完，那么当for循环执行完i的值正好是11。为了达到我们想要的效果，需要增加一层“闭包”：
for (i =0; i &10; i ++) {
(function(){
var index =
markers[i].addEventListener('click', function(){
this.openInfoWindow(new Window('我是第'+ (index +1) +'个标注'));
上面的代码你可以理解为新增加的函数内部保存了每次循环变量i的值，那么当监听函数执行时将会获取闭包内保存的index变量的值，而不是之前的变量i的值。再看一下，效果OK了：
对地图API事件增强
熟悉google地图API的人可能知道，其事件相关的接口要比百度地图API的
接口丰富，除了提供简单的addListener和removeListener之外，还提供了clearListeners、
clearInstanceListeners、trigger等方法。那么这些功能在百度地图API中如何实现呢？实际上百度地图API的内部也有事件
机制并且与对外公开的事件共用一套机制，如果API提供了诸如clearListeners的方法必然会对API内部的逻辑造成影响，因此也就没有提供类
似的接口。如果开发者很喜欢google地图API的事件机制模式并且非用不可怎么办呢，没问题，这里和大家分享一个我的开源项目，名字暂定为
EventWrapper，它基于百度地图API，但提供了类似google地图事件机制的接口形式。开源项目地址：。src目录下的main.js就是全部代码了，这是开发版本，如果直接使用可以获取release目录下的eventwrapper.min.js。
我们通过几个例子来看一下它的使用方法，首先需要引用这个js脚本，这里就直接使用github提供的原始数据的地址：
&script src="/jiazheng/EventWrapper/master/release/eventwrapper.min.js" type="text/javascript"&&/script&
下面我们添加两个事件监听：
var clickListener = EventWrapper.addListener(map, 'click', function(e){
alert(e.point.lng +', '+ e.point.lat);});var dragListener = EventWrapper.addListener(map, 'dragend', function(e){
alert(e.point.lng +', '+ e.point.lat);});
移除的方式如下：
EventWrapper.removeListener(dragListener);
我们将之前addListener方法返回的对象传递给removeListener即可，这和google的使用方式一致。此外我们还可以清除某个对象所有通过此方式绑定的事件：
EventWrapper.clearInstanceListeners(map);
// 清除map实例所有的事件监听函数
此外EventWrapper还提供了addDomListener、addDomListenerOnce、addListenerOnce、clearListeners和trigger方法，具体使用方法可参考开发版本脚本中的注释信息（开发脚本原始数据地址：）。
目前此项目基本完成，但是还没有经过大规模的测试和验证，可能存在不完善的地方，也欢迎广大开发者发现问题并进行反馈。
补充一个很多人都在问的问题
很多人在使用API时发现我绑定了map和一
个marker的click事件，发现点击marker的时候，不仅marker的click事件会被触发，map的click事件也会被触发。API会
将事件向上传递，实际上点击任何覆盖物都会向上传递到map。那问题是怎么区分呢？map的click事件的事件参数e中包含一个名为overlay的属
性，所以只需要在事件处理函数中判断overlay是否存在即可区分。来源：/jz1108/
阅读(520)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'百度地图API详解之事件机制',
blogAbstract:'和DOM编程里的事件模型一样，百度地图API也提供了类似的事件机制。本文介绍了事件监听的添加和移除方法，this指针和事件参数的使用以及绑定事件监听函数中涉及的闭包问题，最后分享了一个用来增强地图API事件机制的开源项目。\n\n事件添加和移除\n我们最简单的事件开始，下面的代码示例给map对象添加了click事件的监听函数，当用户点击地图时该监听函数就会被触发：\n\nvar map ',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:4,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:true,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}

我要回帖

更多关于 js 缓慢改变dom高度 的文章

 

随机推荐