搜索功能可以实现但是console里会报错
来源：4-6 地图搜索与poi结合（3）
慕斯4131122
2019-04-06 17:33:18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#searchResult {
width: 280px;
height: auto;
position: absolute;
z-index: 99;
background-color: white;
border: 1px solid #ccc;
box-shadow: 0 0 5px black;
right: 10px;
top: 100px;
}
#setCityNode {
top: 200px
}
ul,
li {
list-style: none;
z-index: 99;
cursor: pointer;
}
#searchNode {
width: 280px;
height: 30px;
position: absolute;
right: 10px;
top: 50px;
}
#searchLocation {
width: 280px;
height: 30px;
position: absolute;
right: 10px;
top: 20px;
}
</style>
<!-- 异步加载
<script>
window.onLoad = function(){
var map = new AMap.Map('container');
}
</script>
<script src="https://webapi.amap.com/maps?v=1.4.14&key=982901a50be7d36ac590525a2b87e970&callback=onLoad"></script> -->
<!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=982901a50be7d36ac590525a2b87e970"></script> -->
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.14&key=982901a50be7d36ac590525a2b87e970&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
</head>
<body>
<div id="container"></div>
<!-- <div id="searchLocation">
<input type="text" id="searchText">
</div> -->
<div id="searchNode">
<input type="text" id="searchIpt">
<button id="btn">搜索</button>
</div>
<div id="searchResult">
</div>
<script>
var map = new AMap.Map('container', {
zoom: 15, //初始的地图级别
// center:[110.012279,40.58922] //初始化地图的中心点
});
// var searchLocation = new AMap.Autocomplete({
// input:'searchText'
// })
// var placeSearch = new AMap.PlaceSearch({
// map:map
// })
// AMap.event.addListener(searchLocation,'select',function(e) {
// placeSearch.search(e.poi.name);
// })
AMap.service(['AMap.PlaceSearch'], function() {
btn.onclick = function() {
new AMap.PlaceSearch({
pageSize:5, //一页显示几行搜索到的信息
pageIndex:1,//默认显示第几页
city:'010',//搜索哪一城市
citylimit:true,//强制限制在设定的城市内搜索
map:map,//显示在哪个地图里
panel:'searchResult'//放在那个元素下
}).search(searchIpt.value);
}
});
</script>
</body>
</html>
1回答
-
好帮手慕星星
2019-04-07
你好，经使用Chrome测试搜索出来是没有报错的哦，如下：
自己可以重新测试下，如果测试还是有报错的话，可以将报错信息截图粘贴上来，老师帮助你看下。
祝学习愉快！
0
相似问题