百度地图需要的效果-有感

实现一个按钮，点击之后百度地图的一处覆盖物显示出来，再次点击，消失

覆盖物的要求：往外发散性的标志（自己想象怎么实现）

效果如：http://www.browniephoto.com/

方法一：网上找gif图片，没有合适的，fail

方法二：ps，但是发现，p好的图，如果按照开始找的百度地图API的方法，所p的图大小必须规范，否则缩小保存后失真，样式折叠在一块了（后来尝试了，做好的p图，缩小30%，用GifCam软件把动图录像成gif，但是背景什么的也都在，又用ps每一帧处，处理了一下，很麻烦！）

 1 <body>
 2     <div id="allmap"></div>
 3     <div id="control">
 4         <input type="button" onclick="hide_show()" value="点击">
 5     </div>
 6 </body>
 7 </html>
 8 <script type="text/javascript">
 9     // 百度地图API功能
10     var map = new BMap.Map("allmap");
11     var point = new BMap.Point(116.404, 39.915);
12     map.centerAndZoom(point, 15);
13     
14     //创建图标
15     var pt = new BMap.Point(116.417, 39.909);
16     var myIcon = new BMap.Icon("写上自己图片的url", new BMap.Size(300,157));
17     var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
18     map.addOverlay(marker2);              // 将标注添加到地图中
19 
20 var show=0;
21     function hide_show(){
22         if(show==0){
23             marker2.hide();
24             show=1;
25         }else{
26             marker2.show();
27             show=0;
28         }
29       
30     }
31 </script>

方法三：再次找合适的百度地图API的Demo,大致理解每一步，根据核心代码，换成自己需要的，其中用到

prototype 属性来向对象添加属性

div.style.whiteSpace = "nowrap";段落中的文本不进行换行：

div.style.MozUserSelect = "none";让文字不被选中

注意：

arrow.src = "img/icon22.gif";

不要写成arrow.style.src = "img/icon22.gif";或者arrow.src = "url(img/icon22.gif)";很容易混淆

关于这个代码，见上篇的 2016年8月22日

百度地图API-自定义图标覆盖物