【百度地图API】关键字提示搜索组件失效
百度地图API3.0——关键字提示搜索组件
这是官网上的实例，打印语句是我自己添加的
如图所示，当我在输入框中输入文字，他会匹配地标，当选择后，后再页面上标点；
注意！
打印语句：
Ji.Ir（控制台）中是有10列数组的，里面包含了10组匹配的地标信息（包含经纬度）
我的代码
var map;
function loadSearchDestination() {
map = new BMap.Map("map_order");
map.centerAndZoom("上海", 19);
map.enableScrollWheelZoom(true);
map.setCurrentCity("上海");
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input": "search",
"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() {
function myFun() {
console.log(local)
console.log(local.getResults())
pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
console.log(pp)
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加标注
$("#h_point").val(pp.lng + "-" + pp.lat);
$("#h_position").val(myValue);
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
}
我的控制台
如图：我的代码是从实例中copy，一模一样，但在我这里，输入目的地也有下拉选项，可当选中选项后，打印local、local.getResults()【也就是页面上的Ji】里面没有数组（正常情况行是有10组数据）
试了一下午，代码都是正常的，没发现哪里有问题，只能求助于各位
还有一处不同，还是控制台打印Ji.Ir 中的moreResultsUrl属性
官网：
"https://api.map.baidu.com/place/search?res=jsapi&query=上海市浦东新区华康佳苑®ion=上海市&output=html"
本地：
"https://api.map.baidu.com/place/search?res=jsapi&query=上海市浦东新区华康佳苑®ion=undefined&output=html"
我在代码中也进行了setCurrentCity和centerAndZoom
本地的这里显示undefined
！！！！！
附上实例地址https://lbsyun.baidu.com/jsdemo3.0.htm#js3_31
发现您在 HTML 中定义了一个 onload 事件，但是却没有将其绑定到任何元素上。可以尝试将它绑定到 body 元素上，代码如下：
<body onload="initMap()">
然后，在 JavaScript 中定义对应的 initMap() 函数，并在其中初始化地图。可以参考下面的代码修改：
function initMap() {
map = new BMap.Map("l-map");
var point = new BMap.Point(121.487899, 31.249162); //设置初始中心点位于上海
map.centerAndZoom(point, 12);
var ac = new BMap.Autocomplete({
input: "suggestId",
location: map
});
//以下省略...
}
最后，您在调用 myFun() 函数时，不能直接访问 local 对象，因为在 setPlace() 函数内，该对象是一个局部变量。可以在 setPlace() 函数内部重新定义一个函数 mySearchComplete()，当智能搜索完成时调用该函数即可。完整的修改后代码如下：
<!DOCTYPE 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 {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
font-size: 14px;
}
#l-map {
height: 300px;
width: 100%;
}
#r-result {
width: 100%;
}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=key"></script>
<title>关键字输入提示词条</title>
</head>
<body onload="initMap()">
<div id="l-map"></div>
<div id="r-result">
请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" />
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto;display:none;"></div>
</body>
</html>
<script type="text/javascript">
var map;
function initMap() {
map = new BMap.Map("l-map");
var point = new BMap.Point(121.487899, 31.249162); //设置初始中心点位于上海
map.centerAndZoom(point, 12);
var ac = new BMap.Autocomplete({
input: "suggestId",
location: map
});
ac.addEventListener("onhighlight", function(e) {
//省略...
});
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() {
map.clearOverlays(); //清除地图上所有覆盖物
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: mySearchComplete
});
local.search(myValue);
}
function mySearchComplete() {
var results = local.getResults(); //获取智能搜索结果
if (results) {
var pp = results.getPoi(0).point; //获取第一个智能搜索的结果
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加标注
}
}
}
</script>
希望能帮到您，如有问题请随时追问。
以下答案由GPT-3.5大模型与博主波罗歌共同编写：
根据你提供的信息，问题可能在于你没有等到BMap.LocalSearch对象搜索完成再获取结果。你可以修改代码，将setPlace()函数中的代码改为以下形式：
function setPlace() {
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: function(results) {
console.log(local)
console.log(results)
pp = results.getPoi(0).point; //获取第一个智能搜索的结果
console.log(pp)
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加标注
$("#h_point").val(pp.lng + "-" + pp.lat);
$("#h_position").val(myValue);
}
});
local.search(myValue);
}
这里将获取搜索结果的代码放在了onSearchComplete的回调函数中，以等待搜索完成再获取结果。
另外，如果你想让搜索框一开始就自动搜索出周边地点，可以在setPlace()函数中加入以下代码：
ac.setInputValue("上海市浦东新区", true); //将搜索框的值设为"上海市浦东新区"
ac.show(); //调用show()方法显示下拉列表
这里的关键是将第二个参数设为true，表示自动触发下拉列表的选中事件，从而调用setPlace()函数进行搜索和标点。
如果我的回答解决了您的问题，请采纳！
内容来源与ChatGpt4及newbing和百度：
你可以尝试检查以下几点：
确认你的API key是否正确，是否在百度地图API控制台中启用了“地点检索API”和“地图JavaScript API”两个服务。
确认你的代码中是否正确引入了百度地图API库，如下所示：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的API key"></script>确认你的代码中是否正确创建了Autocomplete实例，如下所示：
var ac = new BMap.Autocomplete({ "input": "suggestId", "location": map });确认你的代码中是否正确绑定了onconfirm事件，如下所示：
ac.addEventListener("onconfirm", function(e) { var _value = e.item.value; var myValue = _value.province + _value.city + _value.district + _value.street + _value.business; console.log(myValue); // 打印选中的关键字提示 setPlace(); // 在地图上标点 });
如果以上四点都正确，但问题仍然存在，你可以尝试查看浏览器控制台是否有其他错误提示，或者尝试重新生成API key并替换原来的key。
祝您问题迎刃而解
不知道你这个问题是否已经解决, 如果还没有解决的话:- 你可以看下这个问题的回答https://ask.csdn.net/questions/7805431
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^