好贷网好贷款

百度地图api接口poi检索示例----并在信息框显示经纬度

发布时间:2016-12-4 16:22:24 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"百度地图api接口poi检索示例----并在信息框显示经纬度",主要涉及到百度地图api接口poi检索示例----并在信息框显示经纬度方面的内容,对于百度地图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>

上一篇:暴力或随机-hdu-4712-Hamming Distance
下一篇:cookie加密解密

相关文章

相关评论