在项目中,我们是有可能要用到地图之类的来标示位置信息的,所以,查阅百度地图的api后简单做了个小例子,有需要详细了解的可以参阅百度地图的api使用实例,还是很清楚的。手机充值:http://yjck67.taobao.com,自己的小店
实际上,百度的api调用还是比较容易的,采用javascript的方式调用,只要有网络就行,其书写方式采用了面向对象的方式,所以对于使用面向对象编程语言的人来说还是很好理解的。
下面看看代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>百度地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:1000px;height:800px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); // 创建Map实例
var point = new BMap.Point(108.9535, 34.26586); // 创建点坐标
map.centerAndZoom(point,20); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
map.enableKeyboard(); // 启用键盘操作。
//var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)};
map.addControl(new BMap.NavigationControl()); //添加鱼骨控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
marker.addEventListener("click", function(){
alert(" 这里可是西安市的中心位置啊");
});
var contextMenu = new BMap.ContextMenu();
var txtMenuItem = [
{
text:'放大',
callback:function(){map.zoomIn()}
},
{
text:'缩小',
callback:function(){map.zoomOut()}
},
{
text:'放置到最大级',
callback:function(){map.setZoom(18)}
},
{
text:'查看全国',
callback:function(){map.setZoom(4)}
},
{
text:'在此添加标注',
callback:function(p){
var marker = new BMap.Marker(p), px = map.pointToPixel(p);
map.addOverlay(marker);
}
}
];
for(var i=0; i < txtMenuItem.length; i++){
contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
if(i==1 || i==3) {
contextMenu.addSeparator();
}
}
map.addContextMenu(contextMenu);
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search("钟楼");
/*
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置:'+r.point.lng+','+r.point.lat);
}
else {
alert('failed'+this.getStatus());
}
})*/
</script>
上图就是一些效果