使用AMap.Autocomplete() 自动补全插件，实现搜索功能
metacharset="UTF-8"title>map
style>*{margin:0;padding}#containerwidth100%height100%topleftpositionabsolute; #setZoomNode400pxheight100pxbackground-color#fffborder1px solidbox-shadow0 0 5px #00020pxright}
bodydivid="container"div="setZoomNode">鼠标点击的经纬度：span="xy"span>
>
varmap=newAMap.Map("container);//加载AMap.Autocomplete自动补全插件
AMap.plugin(AMap.Autocomplete,function(){
console.log(插件加载完成);使用插件的搜索功能
AMap.Autocomplete().search(宁波(status,data){
console.log(data);
})
})>
html>
使用自动补全搜索，并展示出来。点击后可以定位
list-stylenone200px500px#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){fori;i
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=
="/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.onclickAMap.service([(){AMap.PlaceSearch({
pageSize:4pageIndex:city:cityLimit:true限制城市
map:map,1)"> panel:}).search(searchIpt.value);
})
}>
二者结合使用的demo
AMap事件监听
AMap.event.addListener(searchVal,"select",function(e){
//输入地址，选中某个具体地址时触发
console.log(e);
})
全部代码：
="/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Autocomplete,AMap.PlaceSearch">
searchValsearchIpt});placeSearchAMap.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.onclickAMap.PlaceSearch({
type:餐饮住宿
pageSize:list}).searchNearBy(1000(){});搜索距离指定中心点方圆1000米的住宿点
}
})>
添加标记点
>
]
});添加标记
markerAMap.Marker({
icon:/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>
自定义图标样式
]
});自定义图标样式
marker1AMap.Icon({
size:AMap.Size(500),1)">告诉地图图片尺寸
image:1.jpg100)地图上显示的图片尺寸
})创建图标
mk1AMap.Marker({
position:[图标位置
icon:marker1指定图标样式
})
mk1.setMap(map);图标丢入地图
>
自定义标记点-多标记
marker23132.jpg60mk2121.4497920000000229.68388icon:marker2})
map.add([mk1,mk2]);图标批量加入地图
>
删除标记
方法一：marker.setMap(null)
mkicon:})
mk.setMap(map);3秒后清除标记
setTimeout((){
mk.setMap(null);
},1)">3000);>
方法二：
map.remove([marker...])
})29.668388})
map.add([mk1,mk2]);(){
map.remove([mk1,mk2]);
},1)">>
android开发 百度地图 定位+搜索周边+点击兴趣点+显示旗袍 高德地图API之地图搜索+兴趣点POI+标记点操作...
