百度地图需要的效果-有感
实现一个按钮,点击之后百度地图的一处覆盖物显示出来,再次点击,消失
覆盖物的要求:往外发散性的标志(自己想象怎么实现)
效果如: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日
不会的搜一搜,如果侵犯了您的权益,请见谅,及时联系我哦☺