前天周六,有个好友过来玩,他说想在他的网站中加入地图导航模块,但不知道选择哪个第三方Map API
在网上查了下Baidu、Google、QQ和MapBar等4种Map API(都是采用JS开放API),也查看了它们的SDK开发文档,下面来谈谈自己的体会
Map API文档
BMap API(Baidu)与google.maps API(Google)文档相对最完备、详尽、简洁,并且给出了很多学习用例,非常适合初学者入门学习、应用开发
QMap API(QQ)与MapBar API(MapBar)文档虽然也比较完备,但示例与代码分开了,不能很好体现代码与效果的所见即所得
Map Function
BMap API和Google.maps API,应该就可以满足绝大部分需求
就易用性和色彩柔和性,推荐Baidu BMap API
就精确性和世界地图,推荐Google Google.maps API
精确性:
Baidu BMap提供小数点后六位的精度,如(116.397128, 39.916527);
Google google.maps则提供小数点后14位的精度,如New York(40.69847032728747, -73.9514422416687)
世界性:
Baidu BMap仅提供中国区域(包括港、澳,但目前不包含台湾、日本,可能百度日本分公司含有);
Google google.maps则提供全球区域的地图(支持本地化)
3D效果:
Baidu BMap目前仅提供几个中国大城市3D地图(如北、上、广和深圳);
Google google.maps则支持大部分国家的3D车载导航(目前仅支持中国部分城市,如上海)
API风格:
BMap API和google.maps的API接口是有些区别,两者的API风格,可以代表其它几款开放的Map API风格
QMap API与google.maps API接口的风格很类似,MapBar API则与BMap API接口风格很类似,甚至有些函数接口名都相同,如centerAndZoom
下面,简单做一下对比 BMap API(Baidu)和google.maps API(Google)——都是以“天安门”为参照原点
BMap API(Baidu)
< html >
< head >
< meta name ="viewport" content ="initial-scale=1.0, user-scalable=no" />
< meta http-equiv ="Content-Type" content ="text/html; charset=gbk" />
< title > Baidu Map V1.2 </ title >
< script type ="text/javascript" src ="http://api.map.baidu.com/api?v=1.2&services=true" >
<!-- add baidu map api -->
</ script >
</ head >
< body >
< div id ="container" style ="width: 600px; height: 400px;" >
</ div >
</ body >
</ html >
< script type ="text/javascript" >
var map = new BMap.Map( " container " ); // new Map
var point = new BMap.Point( 116.397128 , 39.916527 ); // Location, (经度, 纬度)
map.centerAndZoom(point, 15 ); // show Map
// 添加缩放功能
map.enableScrollWheelZoom();
map.enableKeyboard();
</ script >
效果图如下:
< html >
< head >
< meta name ="viewport" content ="initial-scale=1.0, user-scalable=no" />
< meta http-equiv ="content-type" content ="text/html; charset=gbk" />
< title > Google Map V3 </ title >
< link href ="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
rel ="stylesheet" type ="text/css" />
< script type ="text/javascript" src ="http://maps.google.com/maps/api/js?sensor=false" >
<!-- add google map api -->
</ script >
</ head >
< body onload ="initialize()" >
< div id ="container" style ="width: 600px; height: 400px;" >
</ div >
</ body >
</ html >
< script type ="text/javascript" >
function initialize()
{
var myLatlng = new google.maps.LatLng( 39.916527 , 116.397128 ); // location, (纬度, 经度)
var myOptions =
{
zoom: 12 ,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var obj = document.getElementById( " container " ); // container
var map = new google.maps.Map(obj, myOptions); // show map
}
</ script >
url:http://greatverve.cnblogs.com/archive/2011/07/12/google-baidu-map-api.html