使用AMap.autocomplete() 自动补全插件，实现搜索功能
<!DOCTYPE HTML><HTML lang="en"head> Meta charset="UTF-8"Title>map</script type="text/JavaScript" src="https://webAPI.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> style> *{margin:0;padding} #container wIDth100% height 100%topleftposition absolute; #setZoomNode400pxheight100pxbackground-color #fffborder1px solIDBox-shadow0 0 5px #00020pxright} bodydiv ID="container"div="setZoomNode"> 鼠标点击的经纬度：span ="xy"span> > var map=new AMap.Map("container); //加载AMap.autocomplete自动补全插件 AMap.plugin(AMap.autocomplete,function(){ console.log(插件加载完成); 使用插件的搜索功能 AMap.autocomplete().search(宁波(status,data){ console.log(data); }) }) > HTML>
使用自动补全搜索，并展示出来。点击后可以定位
List-style none200px500px #node licursorpointer> input ="text" ID="txt"ul ="node"ul(){ console.log("插件加载完成"); txt.oninput(){ node.INNERHTML""; console.log(this.value);//输入框中的文本 if(this.value==) return使用插件的搜索功能 .value,data){ for i;i<data.tips.length;i++){ olidocument.createElement(li); oli.INNERHTMLdata.tips[i].name; 将坐标赋值给属性 oli.rdata.tips[i].location.R; oli.qdata.tips[i].location.Q; node.appendChild(oli); oli点击事件 oli.onclick(){ console.log(.r+.q); map.setCenter([.r,1)">.q]); } } console.log(data); }) } }) >
点击之后自动设置中心点
插件还有另一种方式来加载 &plugin=
="https://webAPI.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.autocomplete">
调用也有另一种方式（官方提供，自带下拉样式）
new AMap.autocomplete({ input:"txt" }) 完整代码：
官方给出的搜索方式 AMap.autocomplete({ input:txt }) >
输入提示与POI结合
POI =》 point of interest 兴趣点
280px> ); 兴趣点服务 AMap.service([AMap.PlaceSearch],1)"> AMap.PlaceSearch({ pageSize:5一页显示几条 pageIndex:1默认是1，可不写 city:0574城市区号 map:map,1)">地图名 panel:setZoomNode数据装载容器 }).search(电影院); }) >
需要注意的是：只有在服务器上才能显示图片
通过输入框搜索
50px #searchNode30pxbackground#fff="searchNode"="searchIpt"button ="btn">搜索button); btn.onclick AMap.service([(){ AMap.PlaceSearch({ pageSize:4 pageIndex: city: citylimit:true限制城市 map:map,1)"> panel: }).search(searchIpt.value); }) } >
二者结合使用的demo
AMap事件监听
AMap.event.addListener(searchVal,"select",function(e){ //输入地址，选中某个具体地址时触发 console.log(e); })
全部代码：
="https://webAPI.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.autocomplete,AMap.PlaceSearch"> searchValsearchIpt }); placeSearch AMap.PlaceSearch({ map:map }); AMap事件监听 AMap.event.addListener(searchVal,1)">select(e){ 输入地址，选中某个具体地址时触发 console.log(e); placeSearch.search(e.poi.name); }) >
在给定范围内搜索（搜索周边）
#searchNode300px="List"> 19121.5497920000000229.868388] }); console.log(map.getCenter().toString()); AMap.service([(){ btn.onclick AMap.PlaceSearch({ type:餐饮住宿 pageSize:List }).searchNearBy(1000(){}); 搜索距离指定中心点方圆1000米的住宿点 } }) >
添加标记点
> ] }); 添加标记 marker AMap.Marker({ icon:https://a.amap.com/JsAPI_demos/static/demo-center/icons/poi-marker-default.png官方提供的标记 position:[] }); marker.setMap(map); >
点击地图添加标记点-多标记
11] }); map.on(click(e){ console.log(e.lnglat); 添加标记 AMap.Marker({ icon: position:[e.lnglat.R,e.lnglat.Q],offset: AMap.Pixel(-25) }); marker.setMap(map); }) >
通过CSS修改标记点尺寸
先获取到样式名
.amap-icon img25px34px>
自定义图标样式
] }); 自定义图标样式 marker1 AMap.Icon({ size: AMap.Size(500),1)">告诉地图图片尺寸 image:1.jpg100)地图上显示的图片尺寸 }) 创建图标 mk1 AMap.Marker({ position:[图标位置 icon:marker1指定图标样式 }) mk1.setMap(map);图标丢入地图 >
自定义标记点-多标记
marker23132.jpg60 mk2121.4497920000000229.68388 icon:marker2 }) map.add([mk1,mk2]);图标批量加入地图 >
删除标记
方法一：marker.setMap(null)
mk icon: }) mk.setMap(map); 3秒后清除标记 setTimeout((){ mk.setMap(null); },1)">3000); >
方法二：
map.remove([marker...])
}) 29.668388 }) map.add([mk1,mk2]); (){ map.remove([mk1,mk2]); },1)">>
总结
以上是内存溢出为你收集整理的高德地图API之地图搜索+兴趣点POI+标记点 *** 作全部内容，希望文章能够帮你解决高德地图API之地图搜索+兴趣点POI+标记点 *** 作所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）