在线地图开发

最近需要做一些在线地图的应用，于是去看了百度的在线地图API，发现还不错。

先看看对应js的api。

 

首先需要申请一个apikey，然后在页面的head里加入：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

之后加入显示地图的div，id="allmap"，之后在html标签后增加创建具体地图的js：

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.enableScrollWheelZoom();
    map.centerAndZoom("北京天安门",16);
    map.addEventListener("load",function(){
        //alert("地图加载完毕");
        var marker = new BMap.Marker(map.getCenter());
        map.addOverlay(marker); 
        marker.show();
        
        var opts = {
          position : map.getCenter(),    // 指定文本标注所在的地理位置
          offset   : new BMap.Size(-43, -45)    //设置文本偏移量
        }
        var label = new BMap.Label("我爱北京天安门", opts);  // 创建文本标注对象
        label.setStyle({
             backgroundColor: "transparent",
             border: "0px",
             color : "black",
             fontWeight: "bold",
             fontSize : "12px",
             height : "20px",
             lineHeight : "20px",
             fontFamily:"微软雅黑"
         });
        map.addOverlay(label); 
        });
    
    map.addControl(new BMap.MapTypeControl());
    map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_SMALL}));
</script>

整体来看，api还是挺丰富的，支持在上面增加各种文本标签、marker、覆叠物等……

API帮助文档地址：http://developer.baidu.com/map/reference/index.php

 

之前就很想做一个应用，用于标记自己去过的各种地点，或者是做特定的地点分布（如贫困留守儿童分布）和查询的应用，这下子看是没有什么大问题了。

另外，正常的gps坐标和百度坐标是需要转换的，并且每次转换的结果会不一样，有2米内的误差。

转换服务地址

http://api.map.baidu.com/geoconv/v1/?

组成说明：

域名：api.map.baidu.com

服务名：geoconv

服务版本号：v1

同样，也是需要密钥的。

详细参考说明：http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition

 

如果之后嵌入式领域普及使用html5，应该可以很轻松地让嵌入式设备 制作出自己定制的地图应用。