FeiYan

网站导航

搜索

腾讯微博 新浪微博 FeelBLog 开源中国社区

百度地图API简单应用技巧

2012-10-18 17:51:12     0个评论     5965次访问

因为国内苦逼的互联网形势,并且凭借自身出众的用户体验和极快的加载速度,百度地图已经成为目前最好的在线地图服务之一;所以在开发某些需要地图的应用时,忍痛排除Google之后的首选就是百度了。

本来一个地图的API是数不胜数的,况且我这只是兼职做了一下js开发,遇到的问题相比海量的知识点是九牛一毛,但是这些问题都是入门级的问题,以后再上手基本上就可以手到码成,实现敏捷开发这一伟大的境界。同时为了方便,开发在jQuery框架上实现,其他js框架可比葫芦画瓢。下面是我开发过程中遇到的几个问题:

1. 地图初始化

地区初始化中几个有用的设置:

//初始化地图
var map = new BMap.Map("map_container");
//设置地图允许使用鼠标滚轮进行放大缩小
map.enableScrollWheelZoom();
//添加地图导航栏(进行放大和缩小的滚轴)
map.addControl(new BMap.NavigationControl());
//添加地图类型(默认支持地图、卫星和三维这三种模式)
map.addControl(new BMap.MapTypeControl());
//加载地图
map.centerAndZoom(cityName);

更多百度地图API基础基础设置可以参考:百度地图API - Class:核心类/Map

2. 定位用户所在地

百度地图API支持不通过其他手段直接定位用户所在城市,并且可以获得适合当前城市的Zoom级别以及中心点经纬度坐标。

var myCity = new BMap.LocalCity();
myCity.get( function(r){
    alert(r.name);          //城市名称
    alert(r.code);          //城市代码
    alert(r.level);         //当前地图Zoom的Level
    alert(r.center.lat);    //当前城市中心点维度
    alert(r.center.lng);    //当前城市中心点经度
    //获取用户信息后可以用下面的方法初始化地图
    map.centerAndZoom(r.name);
});

更多百度API服务类方法可以参考:百度地图API - Class:总类/服务类

3. 在地图上标点

如上图所示,在地图上标点是最常见的需求,从这里开始一般就要涉及到和数据库端交互了。此外,最常用的是在这些点上建立监听事件,百度地图API支持多种用户事件。下面的代码随机在地图上标注10个点并且监听每个点的点击事件(点击后显示该点的信息)。

var map = new BMap.Map("map_container");
map.enableScrollWheelZoom();
map.centerAndZoom('北京市');
map.clearOverlays();        //清除已存在的点
//随机获取10个点(以北京市为例)
var points = [
    {"lat":"39.9817750","lng":"116.3588520"},
    {"lat":"39.7353790","lng":"116.1349560"},
    {"lat":"39.9186890","lng":"116.1199720"},
    {"lat":"39.9651170","lng":"116.4408350"},
    {"lat":"40.3866000","lng":"116.8652090"},
    {"lat":"40.3176670","lng":"116.6353100"},
    {"lat":"39.9265640","lng":"116.4845050"},
    {"lat":"40.1150000","lng":"116.6740690"},
    {"lat":"39.98943","lng":"116.322196"},
    {"lat":"40.2308700","lng":"116.2282020"}
];
var total = points.length;
for (var x = 0; x < total; x++) {
    (function (i) {
        //为每个点创建一个变量
        var marker = 'marker' + i;
        var point = 'point' + i;
        var infoWindow = 'infoWindow' + i;
        var info = 'info' + i;
        point = new BMap.Point(points[i]["lng"], points[i]["lat"]);
        marker = new BMap.Marker(point);
        map.addOverlay(marker);
        infoWindow = new BMap.InfoWindow("测试"+i, { title: "" });
        marker.addEventListener("click", function () {
            this.openInfoWindow(infoWindow); 
        });
    })(x);
}

效果如上图所示,实际的应用会比这个复杂的对,必要时可以使用对象存储点的信息以便复用,详细的百度API覆盖物类方法可以参考:百度地图API - Class:总类/覆盖物类

此外比较有用的就是地图的交通工具了,比如公交车、驾车等,这个实现过程比较复杂。目前百度地图iPhone版的是有语音导航的,不知道什么时候可以使用这个语音导航的API呢。

文章标签: 百度  地图  api 

本文地址:百度地图API简单应用技巧

相关文章

2009-07-02:2款JavaScript时间对象的应用

2013-02-18:一个关于自建IP库的设想

0 Comments »

发布评论

最新评论

  1. 像蛋哥一样抛弃博客好多年的天涯像蛋哥一样抛弃博客好多年的天涯

    蛋哥,PHP-7.1中mcrypt扩展已被废弃了,还用途广泛个蛋蛋啊,赶紧更新吧。

  2. SpecsSpecs

    不错~~

  3. zhyzhy

    我也遇到这个问题 不知道是swf 、jcrop 、 uploadify 还是浏览器缓存