web移动端学习:高德地图demo(二)
var auto = new AMap.Autocomplete({
input:"sinput"//直接给到一个输入框的id
});
在高德开发者手册里还有介绍其他手册,请自行查询 高德地图开发者WEB手册:输入提示和POI搜索
运行效果:
自带样式的搜索结果好看很多,但这里只出现了搜索结果
要实现点击搜索结果跳转,还需要调用select事件。
var auto = new AMap.Autocomplete({
input:sinput
});
//点击结果跳转
auto.on("select",function(info){
//console.log(info.poi);
var P = info.poi.location.P;
var Q = info.poi.location.Q;
map.setCenter([Q,P]);
});
- 添加POI,实现兴趣点功能,整合代码
记得要注释掉前面的点击提示结果跳转,不然在POI搜索前会有一个跳转的动作
//实现POI功能
AMap.service(["AMap.PlaceSearch"], function() {
map.getCity(function(info){
//console.log(info.citycode);
//构造地点查询类
var placeSearch = new AMap.PlaceSearch({
pageSize: 5, // 单页显示结果条数
pageIndex: 1, // 页码
city: info.citycode, // 兴趣点城市
citylimit: true, //是否强制限制在设置的城市内搜索
map: map, // 展现结果的地图实例
panel: "node", // 结果列表将在此容器中进行展示。
autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
});
//点击按钮关键字查询
//btn2.onclick = function(){
//placeSearch.search(this.value);
//};
//TODO 针对选中的poi实现自己的功能,整合输入提示和POI功能
AMap.event.addListener(auto, "select", function(e){
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name)
});
});
});
- 这时候的地图大致完成,更多功能可以通过官方手册学习研究
https://lbs.amap.com/api/javascript-api/guide/abc/prepare
这里的POI并不能出现图片,是因为图片加载只能在线上加载,需要使用Node.js服务,具体以后再说。 过年了,新年快了嗷