最近项目中用到了百度地图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();
});
}
});