您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记
百度地图javascript接口开发-plete结果提示自动完成类详解
发布时间：2016-11-20 14:29:50编辑：雪饮阅读（）
plete结果提示自动完成类示例:
<!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;
var autocomplete;
var myValue;
var value;
function InitMap(){
map=new BMap.Map("container");
var point=new BMap.Point(104.06,30.67);//成都的经纬度点
map.centerAndZoom(point,12);
map.enableScrollWheelZoom();
var autocompleteOptions={
location:map,
types:"",
onSearchComplete:function(autocompleteResult){
//alert("本次搜索的关键字:"+autocompleteResult.keyword);
//alert("本次搜索结果总数:"+autocompleteResult.getNumPois());
for(var i=0;i<autocompleteResult.getNumPois();i++){
var poi=autocompleteResult.getPoi(i);
console.log(poi);
}
},
input:"textInput"
};
autocomplete=new BMap.Autocomplete(autocompleteOptions);
autocomplete.addEventListener("onhighlight",function(e){
var str="";
var _value=e.fromitem.value;
if(e.fromitem.index > -1){
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem index = " + e.fromitem.index + " value = " + value;
value = "";
if(e.toitem.index > -1){
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br/>ToItem index = " + e.toitem.index + " value = " + value;
document.getElementById("searchResultPanel").innerHTML = str;
});
autocomplete.addEventListener("onconfirm",function(e){
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
document.getElementById("searchResultPanel").innerHTML = "onconfirm index = " + e.item + "myValue = " + myValue;
setPlace();
});
}
function InputTextClick(){
var keyword=document.getElementById("textInput").value;
if(keyword!=""){
console.log(autocomplete);
autocomplete.search(keyword);
}
}
function setPlace(){
map.clearOverlays();//清除地图上所有覆盖物
var local=new BMap.LocalSearch(map,{
//智能搜索
onSearchComplete:function(){
var pp=local.getResults().getPoi(0).point;//获取第一个智能搜索的结果
map.centerAndZoom(pp,18);
map.addOverlay(new BMap.Marker(pp));//添加标注
}
});
local.search(myValue);
}
</script>
</head>
<body onLoad="InitMap();">
<div id="result">
<div id="searchResultPanel"></div>
<input type="text" id="textInput" onclick="InputTextClick();" size="20">
</div>
<div id="container"></div>
</body>
</html>
关键字词：百度地图api,javascript