百度地图web 关键字输入智能提示省市区限制

百度地图web api 输入关键字提示仅仅给了一个很简单的demo，而且并未提供任何条件限制的api，今天遇到了个比较难受的问题是，网站本身是省市级3级区域选择，然后后面输入详细地址后要在百度地图上显示位置，就是如图所示的情况

很显然，我要在选择省市级后输入准确地址，比如我选择北京市东城区了，我要在东城区里面找成都饭店。。。你一输成都，这个智能提示会在全国范围内搜索，而且事件是自动注册在

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

这个位置的，就是通过input，百度的js对addr2这个input注册监听事件，所以根本是没法改变条件的，唯一的办法就是拦截

百度api这个地方做得还比较明智，就是无论你是通过键盘输入还是js输入，都是触发智能提示的事件，那我就通过一个input（addr），把addr2中的val改为省市区+addr，监听addr的onkeyup事件，onkeydown和百度地图的监听有冲突，把addr2 的位置用addr给覆盖掉，不能display:none，必须占位，不然百度的提示框位置会有问题。并且在选择智能提示后，详细地址不显示省市区的文字，如下的js里也有控制，具体如下：

 <input type="inputText" tabindex="7" id="addr2" name="addr2" placeholder="请输入具体的地址" style="width: 277px;visibility: hidden"/><input type="inputText" tabindex="7" id="addr" name="addr" placeholder="请输入具体的地址" style="width: 277px;z-index: 1;margin-left: -282px;" οnkeyup="mysearch(this)"/>

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EZPCgQ6zGu6hZSmXlRrUMTpr"></script>
@*                                    <div id="r-result">请输入<input type="text" id="suggestId" value="百度" style="width: 400px;"/>*@
@*                                    </div>*@<div id="searchResultPanel" style="border: 1px solid #C0C0C0; width: 400px; height: auto; display: none;"></div><div id="l-map"></div><script type="text/javascript">function mysearch(e) {if ($('#province3').val() == '') {layer.alert('请先选择省市区');$('#addr').val('');$('#addr2').val('');}$('#addr2').val($('#province3').val() + $('#city3').val() + $('#area3').val() + $(e).val());}// 百度地图API功能function G(id) {return document.getElementById(id);}var map = new BMap.Map("l-map");map.centerAndZoom("北京", 12); // 初始化地图,设置城市和地图级别。var ac = new BMap.Autocomplete( //建立一个自动完成的对象{"input": "addr2","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();$('#addr').val(_value.street + _value.business);});function setPlace() {map.clearOverlays(); //清除地图上所有覆盖物function myFun() {var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果map.centerAndZoom(pp, 18);map.addOverlay(new BMap.Marker(pp)); //添加标注}var local = new BMap.LocalSearch(map, {//智能搜索onSearchComplete: myFun});local.search(myValue);}</script>

上张改后的图：

百度地图web 关键字输入智能提示省市区限制相关推荐

【完全开源】百度地图Web service API C#.NET版，带地图显示控件、导航控件、POI查找控件...
目录概述功能如何使用参考帮助概述源代码主要包含三个项目,BMap.NET.BMap.NET.WindowsForm以及BMap.NET.WinformDemo. BMap.NET 对百度地 ...
百度地图WEB服务-逆地理编码使用心得
百度地图WEB服务-逆地理编码使用心得逆地理编码接口 Postman接口请求测试 POI信息召回 Postman接口请求测试上一篇博文写了我开发项目中最长用的正地理编码接口的博文,这次想总结一下逆 ...
百度地图WEB服务-地点检索API
百度地图WEB服务-地点检索API 行政区划区域检索圆形区域检索矩形区域检索地点检索服务(又名Place API)是百度地图开放平台提供的Web API接口服务: 该服务提供多种场景的地点(PO ...
用txt做数据源和winfrom textbox输入智能提示
1.用txt做数据源连接字符串 //text作为数据源的链接字符串 string strConnection = @"Provider=Microsoft.Jet.O ...
百度地图Web API Python模块
目录百度地图Web API Python模块描述快速开始调用方法工厂模式代理模式对象 JsonLike __init__(json=dict(), **kwargs) __str__() ...
使用百度地图Web服务API查询地点的经纬度信息
使用百度地图Web服务API查询地点的经纬度信息 API地理编码服务数据结果 API地理编码服务地理编码服务(又名Geocoder)是一类Web API接口服务: 地理编码服务提供将结构化地址数 ...
python如何爬虫获取图形上点的坐标_python调用百度地图WEB服务API获取地点对应坐标值...
本篇博客介绍如何使用Python调用百度地图WEB服务API获取地点对应坐标值,现有一系列结构化地址数据(如:北京市海淀区上地十街十号),目的是获取对应坐标值. 百度地图开发者平台路线规划使用说明网址 ...
python调用百度地图实现导航_python调用百度地图WEB服务API获取地点对应坐标值
本篇博客介绍如何使用Python调用百度地图WEB服务API获取地点对应坐标值,现有一系列结构化地址数据(如:北京市海淀区上地十街十号),目的是获取对应坐标值. 百度地图开发者平台路线规划使用说明网址 ...
百度地图在用户输入的省市区范围内进行关键字智能提示搜索
现在进行表单输入地址的时候分为省市区和详细地址,省市区用citypicker插件可以轻松完成,但是输入详细地址的时候要调用百度API进行关键字智能提示,那么问题来了,如何在用户输入的省市区内进行关键字 ...

百度地图web 关键字输入智能提示省市区限制

百度地图web 关键字输入智能提示省市区限制相关推荐

最新文章

热门文章

百度地图web 关键字输入智能提示 省市区限制

百度地图web 关键字输入智能提示 省市区限制相关推荐

最新文章

热门文章

百度地图web 关键字输入智能提示省市区限制

百度地图web 关键字输入智能提示省市区限制相关推荐