百度地图API使用记录



背景:最近需要开发一个使用到地图的网站,对百度地图API做了些研究,记录如下

使用方法:

1.引入百度脚本

<span style="font-size:18px;"><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZEiWGifCiQaX0Yj0sxbYmziG"></script></span>

2.初始化地图

var  map = new BMap.Map("allmap", { minZoom: 14, maxZoom: 18 });
           map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
           map.setCurrentCity("厦门");          // 设置地图显示的城市 此项是必须设置的
           map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
           var point = new BMap.Point(118.15, 24.48);
           map.centerAndZoom(point, 16);
</pre><pre name="code" class="javascript"><span style="background-color: rgb(240, 240, 240);">3.在地图上添加自定义的Marker,并为marker添加一些事件</span>
<span style="background-color: rgb(240, 240, 240);">
</span>
var myIcon = new BMap.Icon(lcImgUrl, new BMap.Size(22, 40));
            myIcon.setImageSize(new BMap.Size(22, 40));
            
            //var markers = [];
            for (var i = 0; i < crossCollection.length; i++)
            {
                var temp = crossCollection[i];
                //创建路口信号灯标志
                var pt = new BMap.Point(temp.lon, temp.lat);                
                var crossImgM = new BMap.Marker(pt, { icon: myIcon });  // 创建标注
                crossImgM.setTitle(temp.crossName);
                //crossImgM.setRotation(20);
                map.addOverlay(crossImgM);
                //markers.push(crossImgM);
                //闭包
                (function(){
                    crossImgM.addEventListener("click", setContentForPopup);  
                    crossImgM.addEventListener("infowindowopen",openPopup);
                    crossImgM.addEventListener("infowindowclose",closePopup);
                })();               
            }
<span style="font-size: 18px;">4.动态的改变marker图标</span>
<span style="font-size: 18px;"></span><pre name="code" class="javascript"> var myIcon = new BMap.Icon(lcImgUrl, new BMap.Size(22, 40));
 myIcon.setImageSize(new BMap.Size(22, 40));
 maker.setIcon(myIcon); 



 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ShuSheng007

亲爱的猿猿,难道你又要白嫖?

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值