1. In the previous article, we used JS method to load plug-ins. Now we can use the official recommended method to load the plug-ins required by adding & plugin = amap.autocomplete after the KEY value in the script tag in the header tag

   <script type="text/javascript" src="https://Webapi. Amap. COM / maps? V = 1.4.15 & key = applied key & plugin = amap. Autocomplete "> < script >

1. The call function before use is still valid

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

But it is recommended to use the official writing method, which is simpler and more beautiful

var auto = new AMap.Autocomplete({
	input:'sinput'//Directly give the id of an input box
});

There are other manuals in the Gaud developer manual. Please check them by yourself WEB manual for the map developer of golde: Input prompt and POI search

Operation effect:

The search results with its own style look much better, but only the search results appear here

In order to realize the jump of click search results, you also need to call the select event.

var auto = new AMap.Autocomplete({
	input:sinput
});
//Click results to jump
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]);
    });

1. Add POI, realize the function of interest point and integrate code

Remember to comment out the previous click prompt result jump, otherwise there will be a jump action before POI search

//Implement POI function
AMap.service(["AMap.PlaceSearch"], function() {
    map.getCity(function(info){
    //console.log(info.citycode);
    //Construction location query class
	var placeSearch = new AMap.PlaceSearch({ 
          pageSize: 5, // Number of results displayed on a single page
          pageIndex: 1, // Page number
          city: info.citycode, // City of interest
          citylimit: true,  //Whether to restrict search within the set city
          map: map, // Map example showing results
          panel: "node", // The results list will be displayed in this container.
          autoFitView: true // Whether to automatically adjust the map field of view so that the Marker points drawn are in the visible range of the viewport
        });
	//Click button keyword query
	//btn2.onclick = function(){
          	//placeSearch.search(this.value);
        //};	
	//TODO implements its own functions for the selected POI, integrating input prompt and poi functions
        AMap.event.addListener(auto, "select", function(e){
		placeSearch.setCity(e.poi.adcode);
		placeSearch.search(e.poi.name)
      	});
    });
});

1. At this time, the map is roughly completed, and more functions can be learned and studied through the official manual

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

The POI here can't show pictures, because pictures can only be loaded online, and the Node.js service needs to be used, which will be discussed later. New year's Day is coming