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]);
    });

3. 添加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)
      	});
    });
});

4. 这时候的地图大致完成，更多功能可以通过官方手册学习研究

https://lbs.amap.com/api/javascript-api/guide/abc/prepare

这里的POI并不能出现图片，是因为图片加载只能在线上加载，需要使用Node.js服务，具体以后再说。 过年了，新年快了嗷