百度地图api接口poi检索示例----并在信息框显示经纬度
api官网
http://developer.baidu.com/map/jshome.htm
例子代码(保存为静态页面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" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=42b8ececa9cd6fe72ae4cddd77c0da5d"></script>
<title>根据关键字本地搜索</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
window.openInfoWinFuns = null;
var options = {
onSearchComplete: function(results){
// 判断状态是否正确
if (local.getStatus() == BMAP_STATUS_SUCCESS){
var s = [];
s.push('<div style="font-family: arial,sans-serif; border: 1px solid rgb(153, 153, 153); font-size: 12px;">');
s.push('<div style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">');
s.push('<ol style="list-style: none outside none; padding: 0pt; margin: 0pt;">');
openInfoWinFuns = [];
for (var i = 0; i < results.getCurrentNumPois(); i ++){
var marker = addMarker(results.getPoi(i).point,i);
var openInfoWinFun = addInfoWindow(marker,results.getPoi(i),i);
openInfoWinFuns.push(openInfoWinFun);
// 默认打开第一标注的信息窗口
var selected = "";
if(i == 0){
selected = "background-color:#f0f0f0;";
openInfoWinFun();
}
}
}
else
{
$("#allmap").empty();
$("#allmap").append("检索没有结果，原因: " + result);
}
}
};
// 添加标注
function addMarker(point, index){
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0 - index * 25)
});
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
return marker;
}
// 添加信息窗口
function addInfoWindow(marker,poi,index){
var maxLen = 10;
var name = null;
if(poi.type == BMAP_POI_TYPE_NORMAL){
name = "地址： "
}else if(poi.type == BMAP_POI_TYPE_BUSSTOP){
name = "公交： "
}else if(poi.type == BMAP_POI_TYPE_SUBSTOP){
name = "地铁： "
}
// infowindow的标题
var infoWindowTitle = '<div style="font-weight:bold;color:#CE5521;font-size:14px">'+poi.title+'</div>';
// infowindow的显示信息
var infoWindowHtml = [];
infoWindowHtml.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
infoWindowHtml.push('<tr>');
infoWindowHtml.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">' + name + '</td>');
infoWindowHtml.push('<td style="vertical-align:top;line-height:16px">' + poi.address + poi.point.lng+','+poi.point.lat+' </td>');
infoWindowHtml.push('</tr>');
infoWindowHtml.push('</tbody></table>');
var infoWindow = new BMap.InfoWindow(infoWindowHtml.join(""),{title:infoWindowTitle,width:200});
var openInfoWinFun = function(){
marker.openInfoWindow(infoWindow);
for(var cnt = 0; cnt < maxLen; cnt++){
if(!document.getElementById("list" + cnt)){continue;}
if(cnt == index){
document.getElementById("list" + cnt).style.backgroundColor = "#f0f0f0";
}else{
document.getElementById("list" + cnt).style.backgroundColor = "#fff";
}
}
}
marker.addEventListener("click", openInfoWinFun);
return openInfoWinFun;
}
var local = new BMap.LocalSearch("成都", options);
local.search("宽窄巷子");
</script>
