前言当产品提出新需求时，你的第一反应是皱眉吗？你听了觉得“容易”，然后才勉强挤出几个“好”字？产品问工期的时候，你少说一两天，说多了也没用。周末之前，展示一下需求不简单如何？其实这个时候，你心里已经有了一个大的实现框架……所以产品一做好，你就会精神抖擞。代码，我迫不及待地两分钟就实现了，然后我会发现由于各种原因（技术选型、插件限制、改动太多...）这条路被堵死了，所以我们要找到另一种绕过婉儿实现需求的方法需要已有的功能：点击图中绘制的区域，弹窗会显示具体信息。这里利用高德地图提供的信息表单对其自定义实现的弹窗增加新的要求：点击弹窗后，将鼠标移动到其他区域，弹窗会显示具体地址该地区。实现需求的思路乍一看，easy，高德地图，没有现成的信息窗口弹窗，只要代码设置好就可以使用，第二个第一个开发不费力（代码写得不是很好，但这是大实话，哈哈），跟猫画虎，加上鼠标进入的弹窗。接下来，效果就有很大的问题了。高德用于输入和点击。信息窗的api，但是没有提供同时打开多个的方法，所以当我点击弹窗的时候，只要滑动，就会触发弹窗，导致弹出窗口消失；还有一个小问题就是我点击的弹窗修改了默认的弹窗样式，进入弹窗的时候不想点击弹窗。同时，我不需要关闭按钮，但它们共享相同的类名。如果关闭按钮被隐藏，则两个弹出窗口都将被隐藏。当然，这个小问题可以稍微绕点弯路，加个判断就可以解决，只是有点麻烦……总之，这个方法缺陷太大。思路是，双击弹窗好漂亮，信息齐全，按键简单。我可以cv相同的代码，建议产品经理“别点弹窗，我们把所有的信息都放在弹窗里”，“太大了不好看，遮住了其他区域所以放不下”在《实践检验真理》中，唯一的标准就是气氛有点尴尬，看效果……有什么办法，继续鼓捣。思路3写一个鼠标滑动的弹窗，监听鼠标移动事件，判断是否控制渲染区域是否显示和写入。自定义一个符合要求的div作为弹窗。一定要绝对定位。默认情况下，它不会显示。页面加载完成后，绑定一个匿名函数实现div随鼠标移动。window.onload=function(){varbox=document.getElementById("info_tit");document.onmousemove=函数（甚至t){//解决兼容性问题event=event||窗口事件；//获取滚动条的滚动距离//Chrome浏览器认为滚动条是body，Firefox等浏览器认为滚动条是htmlvarst=document.body.scrollTop||文档.documentElement.scrollTop;varsl=document.body.left||文档.documentElement.scrollLeft;//获取鼠标坐标varleft=event.clientX;vartop=event.clientY;//设置div偏移量box.style.left=left+sl+15+"px";box.style.top=top+st-40+"px";};}鼠标移入区域显示相应内容，移出隐藏看效果故事到此结束...总结条条大路通罗马，但通往罗马的路并不总是平坦的
