最近开发的一个平台中需要用到百度地图,一开始经理跟我说的时候有点懵,不知道怎么弄(本人是个代码小菜鸟,哈哈),在问过度娘之后才知道需要先申请一个密钥,才能调用地图。申请完成后开始在http://lbsyun.baidu.com/jsdemo.htm#a1_2中看示例,讲真的,示例还是挺全的也通俗易懂。但是作为一个刚做开发不久的程序猿来说,有的时候总容易走一些弯路,明明一行代码可以解决的问题非要纠结个半天,还在百度上不停的问度娘,到最后也没有实现功能。
就在刚才,昨天几乎困扰我一下午的问题终于解决了,我不停的修改代码,查询资料都没能解决的问题突然解决了,真是很激动,哈哈哈(一行代码就解决了,可见我有多菜,哎~)
总结一下:
第一步:确认地图的中心点
map = new BMap.Map("allmap");
map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用
map.centerAndZoom(new BMap.Point(120.149959, 32.491424), 10);
第二步:创建标注
var marker = new BMap.Marker(118.149959, 32.491424); // 创建标注
第三步:在地图上添加标注
marker.setTitle(text1); //为标注添加文字,鼠标放在上面就会显示
map.addOverlay(marker); // 将标注添加到地图中
这是基本的三个步骤,还可以添加标注的点击事件
var content = "百度地图";
function addClickHandler(content, marker) {
marker.addEventListener("click", function (e) {
openInfo(content, e)
}
);
}
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
}
可以添加的效果有很多,我就不仔细介绍了。大家可以参考:http://lbsyun.baidu.com/jsdemo.htm#a1_2
(我要继续去写代码了,好多坑啊,555555)