百度地图API实战-优快云博客

本文链接：https://blog.youkuaiyun.com/fubaohai11/article/details/25375201

最近项目中用到了百度地图API开发了一些小功能。总结下，和大家分享。在这里我拿JS的API来讲解。要是实际开发还请详细阅读百度地图API官方手册。地址：http://developer.baidu.com/map/index.html。在这里

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。另外，2014年1月9日，极速版JavaScript API全新上线，此版本专门针对移动端浏览器开发提供。该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制。

申请方式地址：http://lbsyun.baidu.com/apiconsole/key 如下图：

创建好应用后，会得到应用信息：

接下来就可以开发啦！我们先一个小的demo引入，展示一张无控件的简单百度地图。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=您的密钥&v=1.0"></script>
<title>百度地图的Hello, World</title>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} @media (max-device-width: 780px){#golist{display: block!important;}}#golist {display: none;}
</style>
</head>
<body>
<a id="golist" href="../demolist.htm">返回demo列表页</a>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

// 百度地图API功能
var map = new BMap.Map("allmap");            // 创建Map实例
var point = new BMap.Point(116.404, 39.915);    // 创建点坐标
map.centerAndZoom(point,15);                     // 初始化地图,设置中心点坐标和地图级别。
map.addControl(new BMap.ZoomControl());          //添加地图缩放控件
</script>

更多实例还请参考官方demo实例，不在多说。

http://developer.baidu.com/map/jsdemo-mobile.htm#a1_1

接下来我分享下我做的一个应用。

/**********************************************************************************/
$(function(){
userPosition      = eval(userPosition);
branchData        = eval(branchData);

showMap(userPosition['position'], branchData);

if ( ! userPosition['status'] && navigator.geolocation) { //若API未获取到用户坐标则通过浏览器获取
    navigator.geolocation.getCurrentPosition(success);
}

/******************************************************************************/

/**
 * 通过浏览器获取用户所在位置成功后回调函数
 * @author bob <983194768@qq.com> 
 */
function success(position)
{
    var coords = position.coords;
    var userPosition = {longitude:coords.longitude, latitude:coords.latitude};

    $.ajax({
      type: "POST",
      url: XXX,
      data: userPosition,
      timeout: 1000,
      dataType: 'html',
      error: function(){showDefaultMap()},
      success: function(result){showMap(userPosition, result);}
      
    });
}

/**
 * 显示地图
 * @author bob <983194768@qq.com> 
 */
function showMap(userPosition, branchData)
{

    getAddressDetail(userPosition);

    if (typeof(branchData) == 'string') {
        branchData = eval(branchData);
    }

    var userLongitude = userPosition['longitude'];
    var userLatitude  = userPosition['latitude'];

    var map = new BMap.Map("allmap");          // 创建Map实例
    var point = new BMap.Point(userLongitude, userLatitude);   // 创建点坐标  

    /************************/
     var myIcon = new BMap.Icon(baseHost+"/images/user.png",   
        new BMap.Size(22, 27), {
         anchor: new BMap.Size(7, 25),        
        }); 

    var marker = new BMap.Marker(point, {icon: myIcon});

    map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别。
    map.addOverlay(marker);
    /************************/
    map.addControl(new BMap.ZoomControl());        //添加地图缩放控件

    if (typeof(branchData) != 'nudefined') {
      for (var i = 0; i < branchData.length; i++) {
        var point = new BMap.Point(branchData[i]['geo']['longitude'], branchData[i]['geo']['latitude']);

        addMarker(map, point, branchData[i], i, userPosition);
      }
    }  
}

/**
 * 若地理位置获取失败则加载默认地图
 * @author bob <983194768@qq.com> 
 */
function showDefaultMap()
{
    //TODO
}

/**
 * 创建图标对象
 * @author bob <983194768@qq.com> 
 */
function addMarker(map, point, branchData, index, userPosition)
{      
    var myIcon = new BMap.Icon("http://api.map.baidu.com/mapCard/img/location.gif",   
        new BMap.Size(14, 23), {
         anchor: new BMap.Size(7, 25),        
        }); 

    var marker = new BMap.Marker(point, {icon: myIcon});

    map.addOverlay(marker);

    addMessage(marker, branchData, userPosition);
}

/**
 * 根据坐标获取点的详细地址
 * @author bob <983194768@qq.com>
 */
function getAddressDetail(point)
{
    var gc = new BMap.Geocoder();
    var pt = new BMap.Point(point['longitude'], point['latitude']);

    var a = gc.getLocation(pt, function(rs){
        var addComp = rs.addressComponents;
        var address = addComp.district + "," + addComp.street;
        $("#userAddress").attr("value", address);
        
    });
}

/**
 * 显示路线图
 *
 *{name:string, latlng:Lnglat}
 * opts:
 * mode：导航模式，固定为
 * BMAP_MODE_TRANSIT、BMAP_MODE_DRIVING、
 * BMAP_MODE_WALKING、BMAP_MODE_NAVIGATION
 * 分别表示公交、驾车、步行和导航，（必选）
 * region：城市名或县名  当给定region时，认为起点和终点都在同一城市，除非单独给定起点或终点的城市
 * origin_region/destination_region：同上
 *
 * @author bob <983194768@qq.com> 
 */
function showLine(userPosition, branchData)
{
    $('.gohere').click(function(){
    var userAddress = $("#userAddress").attr("value");

    var start = {  
          latlng: new BMap.Point(userPosition['longitude'], userPosition['latitude']),  
          name: userAddress
    }

    var end = {
         latlng: new BMap.Point(branchData['geo']['longitude'], branchData['geo']['latitude']),  
         name: branchData['station_address'] 
    }

    var opts = {  
         mode: BMAP_MODE_TRANSIT,//公交、驾车、导航均修改该参数  
         region: branchData['city']  
    }

    var routeSearch=new BMap.RouteSearch();
    routeSearch.routeCall(start,end,opts);  
    })
    
}
/**
 * 创建浮层对象
 * @author bob <983194768@qq.com> 
 */
function addMessage(marker, branchData, userPosition)
{
    var phone = '';
    var phonenumber = branchData['phone_number'];
   
    for (var i = 0; i < phonenumber.length; i++) {
        phone += "<div class='telInc'><a href='tel:"+phonenumber[i]+"'>"+phonenumber[i]+"</a></div>";
    }

    var content = "<article class='wrap wdcx'>"+
      "<div class='tips' width='80%' style='color:#000000;'>"+
        "<h3 class='title'>"+branchData['station_name']+"</h3>"+
        "<p class='con'><font>地址："+branchData['station_address']+"</p>"+
        "<div class='con'>"+
          "<span class='floatLeft'>电话：</span>"+
          "<span class='phoneList'>"+phone+"</span>"+
        "</div>"+
        "<div class='gobutton'>"+
          "<span class='gobutton'><a class='gohere' href='javascript:void(0)'>去这里</a></span>"+
        "</div>"+
      "</div>"+
    "</article>";

    var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象
    
    marker.addEventListener("click", function(){
        this.openInfoWindow(infoWindow);
        showLine(userPosition, branchData);
        infoWindow.redraw();
  });
}

});

百度地图API使用讲解