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