web移动端学习:高德地图demo（二）

在上一篇中使用了JS的方式加载插件，现在可以使用官方推荐的方法加载所需的插件就是在header标签里的script标签中的KEY值后面加上 &plugin=AMap.Autocomplete 如下


   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请到的KEY&plugin=AMap.Autocomplete"></script>

使用之前的调用函数依旧有效

new AMap.Autocomplete().search(this.value,function(status,data){ 
	console.log(data.tips);
})

但这里推荐使用官方推荐的写法，更加简便而且美观

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服务，具体以后再说。过年了，新年快了嗷

来源：oschina

链接：https://my.oschina.net/u/3981685/blog/3160998

标签

poi

node.js

autocomplete