【百度地图API】如何使用suggestion--下拉列表方式的搜索建议

摘要：

　　百度地图上有一个很强大的搜索建议功能，以下拉列表的方式展示出来。比如，输入“百度”，下拉列表中就会出现“北京市海淀区百度在线网络技术(北京)有限公司”。这个如何实现呢？让我们一步一步来学习。

------------------------------------------------------------------------------------------------------------------------------------

一、suggestion 功能示意图

二、suggestion的类参考

更多类参考，请点击这里：http://dev.baidu.com/wiki/map/index.php?title=Class:%E6%9C%8D%E5%8A%A1%E7%B1%BB/Autocomplete

三、实现HTML的结构

写三个框，分别是suggestion的下拉列表、地图容器，和最终信息显示框。

<div style="margin:50px">请输入:<input type="text" id="suggestId" size="30" value="百度" style="width:300px;" /></div><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:300px;height:600px;position:absolute;left: 650px;top:20px;"></div><div id="container"></div>

四、suggestion的使用

首先，创建一个自动完成的对象。

其中，suggestId就是输入框的id，通过它，能获取到用户输入了什么。

onSearchComplete是搜索到结果后的回调函数，可以不用设置。

var ac = new BMap.Autocomplete(    //建立一个自动完成的对象    {"input" : "suggestId"    ,"location" : map});

根据类参考，suggestion有如下事件。分别可以控制，鼠标在下拉列表上的选择（类似onfouce），和点击确定下拉列表的选项。

我们设置当鼠标在下拉列表上，和点击下拉列表后，都会在右边的信息展示框，展示结果数据。

ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件    var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;    }        str = "FromItem<br />index = " + e.fromitem.index + "<br />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<br />index = " + e.toitem.index + "<br />value = " + value;    G("searchResultPanel").innerHTML = str;});

ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件    var _value = e.item.value;var myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business    G("searchResultPanel").innerHTML =  "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

});

五、通过地址解析设置中心点

由于suggestion返回的是地址数据，并没有point经纬度的信息。我们需要自己在回调函数，或者其他地方通过地址解析来打点。

function setPlace(){// 创建地址解析器实例var myGeo = new BMap.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野myGeo.getPoint(myValue, function(point){if (point) {    map.centerAndZoom(point, 16);    map.addOverlay(new BMap.Marker(point));  }}, "北京");}

加上地址解析之后，能通过获得的地址位置的描述，得到百度经纬度point。随后，添加一个marker覆盖物，即可完成打点工作。最后再把地图中心点设置为point。

六、备注

这个教程是一个最简单的示例，方便大家学习和上手。

由于没有设置城市，该示例只适用于北京市内。详细的城市设定，请看类参考：

七、全部源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><title>自动提示</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script><style type="text/css">body{font-size:13px;margin:0px}#container{width:600px;height:400px}.label{margin-left:20px;font-weight:bold;font-size:14px}</style></head><body><div style="margin:50px">请输入:<input type="text" id="suggestId" size="30" value="百度" style="width:300px;" /></div><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:300px;height:600px;position:absolute;left: 650px;top:20px;"></div><div id="container"></div><script type="text/javascript">function G(id) {return document.getElementById(id);}

var map = new BMap.Map("container");var point = new BMap.Point(116.3964,39.9093);map.centerAndZoom(point,13);map.enableScrollWheelZoom();

var ac = new BMap.Autocomplete(    //建立一个自动完成的对象    {"input" : "suggestId"    ,"location" : map});

ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;    }        str = "FromItem<br />index = " + e.fromitem.index + "<br />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<br />index = " + e.toitem.index + "<br />value = " + value;    G("searchResultPanel").innerHTML = str;});

var myValue;ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件var _value = e.item.value;    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;    G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

    setPlace();});

function setPlace(){// 创建地址解析器实例var myGeo = new BMap.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野myGeo.getPoint(myValue, function(point){if (point) {    map.centerAndZoom(point, 16);    map.addOverlay(new BMap.Marker(point));  }}, "北京");}</script></body></html>

转载于:https://www.cnblogs.com/milkmap/archive/2012/01/12/2320895.html

【百度地图API】如何使用suggestion--下拉列表方式的搜索建议相关推荐

vue调用百度地图API输入提示示例下拉列表一直被触发问题
2019独角兽企业重金招聘Python工程师标准>>> 先看图然后点确定,居然下拉框又被触发了,而且在添加页面各种输入框只要一输入文字就会触发地图下拉框展示,很恶心的一个bug,不 ...
【百度地图API】如何区分地址解析和智能搜索？
摘要: 很多用户一直无法区分地址解析geocoder和智能搜索localsearch的使用场景.该文章用一个详尽的示例,充分展示了这两个类,共5种方法的使用场景.并在文章末尾贴出全部源代码. 工具如下 ...
百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数 ...
调用百度地图API获取经纬度(详细步骤)
前端调用百度地图API获取经纬度(详细操作) 1. 浏览器搜索百度地图开放平台 2. 创建应用点击控制台 --> 应用管理 --> 我的应用 --> 注册账号(如果没有注册过) - ...
java 微信百度地图_[Java教程]H5微信通过百度地图API实现导航方式二
[Java教程]H5微信通过百度地图API实现导航方式二 0 2017-08-01 23:53:20 要有服务器才行哦 body, html {width: 100%;height: 100%;mar ...
html加载百度地图,百度地图API详解之地图API加载方式
本文将向大家介绍百度地图API的两种不同加载方式:同步加载和异步加载. 同步加载这是最常见的加载方式,开发者需要在页面的head标签内添加一个script标签,标签的src属性填写为地图API的地址 ...
【百度地图API】如何制作班级地理通讯录？LBS通讯录
原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...
【百度地图API】建立全国银行位置查询系统（四）——如何利用百度地图的数据生成自己的标注...
摘要: 上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?" 答案就是,利用百度地图上的数据. ---------------------------- ...
百度地图API实例开发分享
第一章. API函数说明 1.1 百度地图API介绍 1．百度地图API是百度提供的给开发人员使用的开放性API,它分为三大类:网页地图应用.手机地图应用.服务器端地图应用:它们分别的意思是:[网页地 ...
（转）【百度地图API】如何制作班级地理通讯录？LBS通讯录
原文地址http://www.cnblogs.com/milkmap/archive/2012/10/24/2735923.html 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复 ...

【百度地图API】如何使用suggestion--下拉列表方式的搜索建议

【百度地图API】如何使用suggestion--下拉列表方式的搜索建议相关推荐

最新文章

热门文章