使用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=

="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.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);

})

全部代码：

="https://webapi.amap.com/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: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>

自定义图标样式

]

});自定义图标样式

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)">>