Input prompt and search

Amap Platform not only provides basic map rendering capabilities but also offers a variety of geographic information query services. To facilitate developer calls, the JS API, combined with the Web Service API, encapsulates the input prompt plugin AMap.AutoComplete and the search plugin AMap.PlaceSearch, providing input prompt suggestions and point of interest search functions respectively. This article will introduce the functions, calling methods, and scenario examples of the above two plugins.

Input prompt and search example

1、Input prompt plugin

1.1 Use input prompts

The AMap.AutoComplete input suggestion plugin allows the display of relevant matching information by entering text fragments in the input box.

The input suggestion plugin supports setting search constraints, such as passing parameters like the POI type (type) and city (city) to search. After the search is completed, users can obtain the corresponding query results.

To obtain matching information using the input suggestion plugin, the following code implementation is required:

//Asynchronously load the AutoComplete plugin
AMap.plugin("AMap.AutoComplete", function () {
  var autoOptions = {
    //Limit to a city
    city: "840380000",
  };
  //Instantiate AutoComplete
  var autoComplete = new AMap.AutoComplete(autoOptions);
  //Search based on keywords, where keyword is the search term
  autoComplete.search(keyword, function (status, result) {
    //When the search is successful, the result is the corresponding match data
    console.log(result);
  });
});

1.2 Use the default UI of the input suggestion plugin

Usually, developers need to trigger the search() method of AMap.AutoComplete based on form control events and render the returned results as DOM to display on the page. To help developers save time and improve efficiency, the AMap JS API also provides a default UI to automatically listen to inputs on the corresponding form controls on the page and display matching results. If you need to use this feature, please write according to the following code example:

AMap.plugin("AMap.AutoComplete", function () {
  var autoOptions = {
    input: "input_id", //Replace "input_id" with the actual id of the input box
    city: "840380000",
  };
  var autoComplete = new AMap.AutoComplete(autoOptions);
  //There is no need to manually execute the search method anymore, autoComplete will dynamically trigger the search based on the corresponding DOM of the input
});

2、POI search plugin

2.1 Query POI detailed information based on keywords

If you need to get relevant POI information in the corresponding city based on keywords, please use the POI search plugin. If you want to search for POIs related to food in New York, you can implement it with the following code:

//Asynchronously load the PlaceSearch plugin
AMap.plugin("AMap.PlaceSearch", function () {
  var placeSearch = new AMap.PlaceSearch({
    //The city specifies the city to search in, and the supported input formats are: citycode and adcode
    city: "840380000",
  });
  placeSearch.search("food", function (status, result) {
    //When the query is successful, the result corresponds to the matched POI information
    console.log(result);
  });
});

2.2 Keyword search around based on latitude and longitude of the center point and radius

If you need to get related POI information around based on keywords, please use the searchNearBy() method. The code implementation is as follows:

AMap.plugin("AMap.PlaceSearch", function () {
  var placeSearch = new AMap.PlaceSearch();
  var cpoint = [103.861974,1.304754]; //Center point coordinates
  placeSearch.searchNearBy("food", cpoint, 200, function (status, result) {
    //When the query is successful, the result corresponds to the matched POI information
    console.log(result);
  });
});

2.3 Keyword search based on range

If you need to retrieve relevant POI information within a specified range based on keywords, please use the searchInBounds() method. The code implementation is as follows:

AMap.plugin("AMap.PlaceSearch", function () {
  var placeSearch = new AMap.PlaceSearch();
  //Polygon boundary coordinates array
  var polygonArr = [
    [-73.509092,40.793609],
    [-73.487738,40.769018],
    [-73.446643,40.768289],
    [-73.424987,40.793844],
  ];
  placeSearch.searchInBounds("food", polygonArr, function (status, result) {
    //When the query is successful, the result corresponds to the matched POI information
    console.log(result);
  });
});

2.4 Query POI details based on POI ID

If a POI ID is known, to query the detailed information of the corresponding POI, you can use the getDetails() method of the POI search plugin. The relevant code is as follows:

AMap.plugin("AMap.PlaceSearch", function () {
  var placeSearch = new AMap.PlaceSearch();
  //Corresponding POI ID
  var poiid = "P0JAK55X50";
  placeSearch.getDetails(poiid, function (status, result) {
  //When the query is successful, the result is the corresponding POI details
  });
});

3、Input prompts and POI search plugin are used together

Typically, AutoComplete is used in combination with PlaceSearch. When using it, you only need to call the relevant query methods of PlaceSearch in the response function of the select event. Here we use the map attribute packaged by PlaceSearch to display the POI search results:

AMap.plugin(["AMap.AutoComplete", "AMap.PlaceSearch"], function () {
  var autoOptions = {
    city: "840380000",
    //Use the ID of the input with associative input
    input: "input",
  };
  var autocomplete = new AMap.AutoComplete(autoOptions);
  var placeSearch = new AMap.PlaceSearch({
    city: "840380000",
    map: map,
  });
  autocomplete.on("select", function (e) {
    //Implement your own function for the selected POI
    placeSearch.search(e.poi.name);
  });
});

4、Description of properties and methods involved in this chapter

4.1 AMap.AutoComplete

4.2 AMap.PlaceSearch