java 百度路况api_百度地图 api

首先在百度开发者中心申请ak

在页面head中引用必要的css样式和js脚本

地图展示页面，具体的功能已经注释

name="" id="" value="查询" οnclick="search()" />

id="container">

//创建Map实例

var map = new BMap.Map("container");

var point = new BMap.Point(116.404, 39.915);

//设置中心点

map.centerAndZoom(point, 11);

map.setCurrentCity("北京");

//添加鼠标滚动缩放

map.enableScrollWheelZoom();

//添加缩略图控件

map.addControl(new BMap.OverviewMapControl({

isOpen : false,

anchor : BMAP_ANCHOR_BOTTOM_RIGHT

}));

//添加缩放平移控件

map.addControl(new BMap.NavigationControl());

//添加比例尺控件

map.addControl(new BMap.ScaleControl());

//添加地图类型控件

map.addControl(new BMap.MapTypeControl());

var cr = new BMap.CopyrightControl({

anchor : BMAP_ANCHOR_TOP_RIGHT

});

//设置版权控件位置

var bs = map.getBounds();

//返回地图可视区域

cr.addCopyright({

id : 1,

content : "版权控件",

bounds : bs

})

//添加版权控件

map.addControl(cr);

//全景控件

map.addControl(new BMap.PanoramaControl());

//是否显示路况提示面板

var ctrl = new BMapLib.TrafficControl({

showPanel : false

});

ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);

map.addControl(ctrl);

//圆形覆盖物

var circle = new BMap.Circle(new BMap.Point(116.404, 39.915), 1000,

{

fillColor : "red"

});

map.addOverlay(circle);

//设置标注的图标

//var icon = new BMap.Icon("map-marker-icon.png",new BMap.Size(50,50));

// 创建标注

var marker = new BMap.Marker(new BMap.Point(116.404, 39.915));

//把标注添加到地图上

map.addOverlay(marker);

//信息窗口

var content = "

content = content + "

地点：北京市区";

content = content + "

时间：2016-1-9";

content += "

";

var infowindow = new BMap.InfoWindow(content);

marker.addEventListener("mouseover", function() {

this.openInfoWindow(infowindow);

});

marker.addEventListener("mouseout", function() {

this.closeInfoWindow();

});

//点击地图，获取经纬度坐标

map.addEventListener("click", function(e) {

document.getElementById("tx").innerHTML = "经度坐标：" + e.point.lng

+ "  纬度坐标：" + e.point.lat;

});

//关键字搜索

function search() {

var keyword = document.getElementById("keyword").value;

var local = new BMap.LocalSearch(map, {

renderOptions : {

map : map

}

});

local.search(keyword);

}

实现效果图如下：

按照惯例，最后附一个百度在线api：http://developer.baidu.com/map/jsdemo.htm#i1_1

其实，每个新功能通过api都有详细的demo,所以好的api事半功倍