公司项目需要,需要使用php,easyui开发,其中一个重要的功能是百度地图应该开发。
这个东西之前没有接触过,刚刚看别人写的应该,多少有点生疏。但总算也是入门了,在
此将关键的一些东西记录下来。以备以后慢慢查询。
首先针对WEB开发,百度地图提供的js api借口。具体怎么用,网上资料很多,但最浅显
最权威的还是到官网去最好了。官网有api接口说明,有demo,资料还是蛮全的。目前官方
网址为http://developer.baidu.com/map/reference/.百度地图开发,先要免费申请密钥,
我用的别人申请好,所以密钥自己申请。
在你的页面引入js文件,src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"。
然后进行创建实例,进行初始化,如下:
var map = new BMap.Map("container"); // 创建地图实例
map.centerAndZoom("上海",12); // 初始化地图,用城市名设置地图中心点
var point = new BMap.Point(121.48, 31.22); // 创建点坐标
map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别
之后,按照需求,可以添加相关控件。
基本包括,地图上的一些控件:
一,下面四组均为控件设置测试
map.addControl(new BMap.NavigationControl()); //左上角移动控件
map.addControl(new BMap.ScaleControl()); //右下角标尺控件
map.addControl(new BMap.OverviewMapControl()); //右下角缩略地图,注意观察,不然看不到
map.addControl(new BMap.MapTypeControl()); //左上角可以切换的三个按钮
map.setCurrentCity("北京"); // 仅当设置城市信息时,MapTypeControl的切换功能才能可用,
上海已经设置了上海,这个函数有毛用。
二,标注设置测试
var point = new BMap.Point(121.48, 31.22);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
三,覆盖物
function addMarker(point, index)
{
// 创建图标对象
var myIcon = new BMap.Icon("car_green.png", new BMap.Size(45, 25), {
// 指定定位位置。
// 当标注显示在地图上时,其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
offset: new BMap.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时,您
// 需要指定大图的偏移位置,此做法与css sprites技术类似。
//imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移 ,这个要注掉才显示
});
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
}
随机向地图添加10个标注
var bounds = map.getBounds();
console.info(bounds);
四,监听标注事件
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.addEventListener("click", function(){ alert("你好,你点击了这里");
});
五,标注拖拉事件
marker.enableDragging();
marker.addEventListener("dragend", function(e){
alert("当前位置:" + e.point.lng + ", " + e.point.lat);
})
六,信息窗口
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "Hello" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("World", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
七,折线画图
var polyline = new BMap.Polyline([
new BMap.Point(lngSpan, latSpan),
new BMap.Point(lngSpan+0.02, latSpan+0.010),
new BMap.Point(lngSpan+0.03, latSpan+0.030)
],
{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}
);
map.addOverlay(polyline);