百度地图API使用记录

导读:本篇文章讲解 百度地图API使用记录,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

背景:最近需要开发一个使用到地图的网站,对百度地图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); 




版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/14819.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!