您当前的位置: 首页 > 学无止境 > 心得笔记 网站首页心得笔记
百度地图javascript接口开发-位置检索-周边检索-范围检索
发布时间:2016-11-20 14:27:45编辑:雪饮阅读()
位置检索,范围与周边检索示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
html{height:100%;}
body{height:100%;margin:0px;padding:0px;}
#container{
clear:both;
height:100%;
width:100%;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=s9vYSVwPjtPFv00vuxKzoNxD"></script>
<script type="text/javascript">
BMap.Point.prototype.toString=function(){
return "当前的经度="+this.lng+",纬度="+this.lat;
}
BMap.Pixel.prototype.toString=function(){
return "当前点坐标x="+this.x+",y="+this.y;
}
var map;
function InitMap(){
map=new BMap.Map("container");
var point=new BMap.Point(104.06,30.67);//成都的经纬度点
map.centerAndZoom(point,12);
map.enableScrollWheelZoom();
var localSearchOptions={
renderOptions:{
map:map,
panel:document.getElementById("result"),
selectFirstResult:true,
autoViewport:true,//是否自动调整视野
},
pageCapacity:5,
onMarkerSet:function(){
alert('markerset');
},
onInfoHtmlSet:function(){
alert("infoHtmlSet");
},
onResultsHtmlSet:function(){
alert("ResultsHtmlSet");
},
onSearchComplete:function(result){
alert("onSearchComplete");
console.log(result);
//检索的关键词是根据关键词的个数来定的,如果关键词的个数是1,那么就是如下这种调用方法,如果个数大于1,那么要在keyword前先加上索引
console.log("检索的关键字是:"+result.keyword);
var poiNum=result.getNumPois();
//检索结果条数也是单个词检索结果,多个词也要根据索引手动实现其统计
console.log("本次检索结果一共:"+poiNum+"个");
},
};
//查询后首先执行onSearchComplete回调函数,然后调用onMarkerSet进行关键点的标注
//再调用onResultsHtmlSet将查询结果填充到result容器中,最后执行onInfoHtmlSet设置信息弹出窗口对象
var localSearch=new BMap.LocalSearch(map,localSearchOptions);
//位置检索
//localSearch.search("十里店");
//还可以多个关键词进行位置检索,最多支持10个关键词的检索
//localSearch.search(["十里店","二仙桥"]);
//范围与周边检索
var bounds=new BMap.Bounds(new BMap.Point(104.06212,30.666241),new BMap.Point(104.107395,30.691585));
localSearch.searchInBounds("银行",bounds);
map.addEventListener("click",function(event){
console.log(event.point);
});
//范围与周边检索结束
}
</script>
</head>
<body onLoad="InitMap();">
<div id="container"></div>
<div id="result"></div>
</body>
</html>
关键字词:百度地图api,javascript