All Products
Search
Document Center

Mobile Platform as a Service:Choose city

Last Updated:Jun 12, 2023

You can call this interface to open the city list.

my.chooseCity

You can call this interface to open the city list.

When you use this interface in iOS client, in order to obtain inverse geographic information, you must set the key of AMAP LBS in the beforeDidFinishLaunchingWithOptions method. The relevant code is as follows. To obtain the key of AMAP LBS, see Obtain Key.

[LBSmPaaSAdaptor sharedInstance].shouldAMapRegeoWhenLBSFailed = YES;
[AMapServices sharedServices].apiKey = @"The key of AutoNavi positioning"

Parameters

The input parameters are of Object type and have the following attributes:

Parameter

Type

Required

Description

showLocatedCity

Boolean

No

Whether to display the currently located city. The default is false.

showHotCities

Boolean

No

Whether to display popular cities. The default is true.

setLocatedCity

Boolean

No

Whether to change the currently located city. The default is false. If showLocatedCity is set to false, this setting is invalid.

cities

Object Array

No

The list of custom cities.

hotCities

Object Array

No

List of custom popular cities. The object fields in the list are same as those in cities.

success

Function

No

The callback function for successful call.

fail

Function

No

The callback function for failed call.

complete

Function

No

The callback function for ended call. The callback function will be executed for both successful and failed call.

cities

The object fields in cities are described as follows.

Parameter

Type

Required

Description

city

String

Yes

The city name.

adCode

String

Yes

The administrative area code.

spell

String

Yes

The city name in Pinyin, which facilitates user search.

Sample code

//.js
my.chooseCity({
  cities: [
    {
      city: 'Chaoyang District',
      adCode: '110105',
      spell: 'chaoyang'
    },
    {
      city: 'Haidian District',
      adCode: '110108',
      spell: 'haidian'
    },
    {
      city: 'Fengtai District',
      adCode: '110106',
      spell: 'fengtai'
    },
    {
      city: 'Dongcheng District',
      adCode: '110101',
      spell: 'dongcheng'
    },
    {
      city: 'Xicheng District',
      adCode: '110102',
      spell: 'xicheng'
    },
    {
      city: 'Fangshan District',
      adCode: '110111',
      spell: 'fangshan'
    }
  ],
  hotCities: [
    {
      city: 'Chaoyang District',
      adCode: '110105'
    },
    {
      city: 'Haidian District',
      adCode: '110108'
    },
    {
      city: 'Fengtai District',
      adCode: '110106'
    }
  ],
  success: (res) => {
    my.alert({
      content: res.city + ':' + res.adCode
    });
  },
});

Return values of a success callback

If the user does not select any city and directly clicks the Back button, the callback function will not be triggered.

The input parameters are in Object type and have the following attributes:

Attribute

Type

Description

city

String

The city name.

adCode

String

The administrative area code.

longitude

Number

The longitude, which is returned only for the currently located city

latitude

Number

The latitude, which is returned only for the currently located city

Sample code

<!-- API-DEMO page/API/choose-city/choose-city.axml-->
<view class="page">
  <view class="page-description">The API for selecting a city</view>
  <view class="page-section">
    <view class="page-section-title">my.chooseCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="chooseCity">Choose city</button>
    </view>
  </view>
  <view class="page-description">The API for changing the currently located city</view>
  <view class="page-section">
    <view class="page-section-title">my.setLocatedCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="setLocatedCity">Change the name of the currently located city</button>
    </view>
  </view>
</view>
// API-DEMO page/choose-city/choose-city.js
Page({
  chooseCity() {
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      success: (res) => {
        my.alert({
          title: 'chooseCity response: ' + JSON.stringify(res),
        });
      },
    });
  },
  setLocatedCity() {
    my.onLocatedComplete({
      success: (res) => {
        my.setLocatedCity({
          locatedCityId:res.locatedCityId,//res.locatedCityId
          locatedCityName:'The changed city name', 
          success: (res) => {
            my.alert({ content: 'Changed the currently located city successfully' + JSON.stringify(res), });
          },
          fail: (error) => {
            my.alert({ content: 'Failed to change the currently located city' + JSON.stringify(error), });
          },
        });
      },
      fail: (error) => {
        my.alert({ content: 'onLocatedComplete failed' + JSON.stringify(error), });
      }
    });
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      setLocatedCity: true,
      success: (res) => {
        my.alert({
          title: 'chooseCity response: ' + JSON.stringify(res),
        });
      },
    });
  },
});

my.onLocatedComplete

When you customize the onLocatedComplete function, you can monitor the callback for the completion of locating this page. This feature is valid only for the case where the setLocatedCity attribute in my.chooseCity is set to true.

Parameters

Name

Type

Description

success

Function

The callback function upon successful call.

fail

Function

The callback function for failed call.

complete

Function

The callback function for ended call. This callback function is executed for both successful and failed call.

Return value

Name

Type

Description

longitude

Number

The longitude of the currently located city.

latitude

Number

The latitude of the currently located city.

locatedCityId

String

The ID of the currently located city, which is required for changing the default located city (by using setLocatedCity).

The sample return value:

{
    longitude:100.3,
    latitude:30.1,
    locatedCityId:""
}

Sample code

<!-- API-DEMO page/API/choose-city/choose-city.axml-->
<view class="page">
  <view class="page-description">The API for selecting a city</view>
  <view class="page-section">
    <view class="page-section-title">my.chooseCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="chooseCity">Choose city</button>
    </view>
  </view>
  <view class="page-description">The API for changing the currently located city</view>
  <view class="page-section">
    <view class="page-section-title">my.setLocatedCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="setLocatedCity">Change the name of the currently located city</button>
    </view>
  </view>
</view>
// API-DEMO page/choose-city/choose-city.js
Page({
  chooseCity() {
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      success: (res) => {
        my.alert({
          title: 'chooseCity response: ' + JSON.stringify(res),
        });
      },
    });
  },
  setLocatedCity() {
    my.onLocatedComplete({
      success: (res) => {
        my.setLocatedCity({
          locatedCityId:res.locatedCityId,//res.locatedCityId
          locatedCityName:'The changed city name', 
          success: (res) => {
            my.alert({ content: 'Changed the currently located city successfully' + JSON.stringify(res), });
          },
          fail: (error) => {
            my.alert({ content: 'Failed to change the currently located city' + JSON.stringify(error), });
          },
        });
      },
      fail: (error) => {
        my.alert({ content: 'onLocatedComplete failed' + JSON.stringify(error), });
      }
    });
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      setLocatedCity: true,
      success: (res) => {
        my.alert({
          title: 'chooseCity response: ' + JSON.stringify(res),
        });
      },
    });
  },
});undefined

my.setLocatedCity

This interface allows you to change the name of the default located city in my.chooseCity.

Parameters

Name

Type

Required

Description

locatedCityId

String

Yes

The ID of the currently located city, which is returned by the onLocatedComplete of my.chooseCity.

locatedCityName

String

Yes

The name of the currently located city.

locatedCityAdCode

String

No

The administrative area code of the currently located city. If no value is specified for this parameter, the value obtained by the control prevails.

locatedCityPinyin

String

No

The name of the currently located city in Pinyin. If no value is specified for this parameter, the value obtained by the control prevails.

success

Function

No

The callback function for successful call.

fail

Function

No

The callback function for failed call.

complete

Function

No

The callback function for ended call. The callback function will be executed for both successful and failed call.

Return values upon callback failure

Name

Type

Description

error

String

The error code.

errorMessage

String

The error description.

Return values upon callback success

Name

Type

Description

locatedCityName

String

The name of the currently located city.

Error code

Error code

Remarks and solution

11

The parameter type is incorrect.

Check whether the parameter type is correct.

12

A required parameter is empty.

Check whether the locatedCityId and locatedCityName parameters are specified.

13

The locatedCityId value does not match.

Ensure that the value is consistent with the locatedCityId value of onLocatedComplete in my.chooseCity.

Sample code

<!-- .axml -->
<view class="page">
  <view class="page-description">Choose city</view>
  <view class="page-section">
    <view class="page-section-title">chooseCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="chooseCity">Choose city</button>
      <button type="primary" onTap="noChooseCity">No popular or current city</button>
      <button type="primary" onTap="selfChooseCity">Customize the city selection</button>
      <button type="primary" onTap="self_chooseCity">Customize the city selection</button>
      <button type="primary" onTap="setLocatedCity">setLocatedCity</button>
    </view>
  </view>
</view>
// .js
Page({
  data: {
    localcity: 'Tianjin',
  },
  chooseCity() {
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      success: (res) => {
        my.alert({ title: `chooseAlipayContact response: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `Failed to select the city${JSON.stringify(error)}` })
      },
      complete: () => {
        my.showToast({ content: 'Completion callback' })
      },
    })
  },
  noChooseCity() {
    my.chooseCity({
      showLocatedCity: false,
      showHotCities: false,
      success: (res) => {
        my.alert({ title: `The operation has succeeded: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `Failed to select the city${JSON.stringify(error)}` })
      },
    })
  },
  selfChooseCity() {
    my.chooseCity({
      cities: [
        {
          city: 'Chaoyang District',
          adCode: '110105',
          spell: 'chaoyang',
        },
        {
          city: 'Haidian District',
          adCode: '110108',
          spell: 'haidian',
        },
        {
          city: 'Fengtai District',
          adCode: '110106',
          spell: 'fengtai',
        },
        {
          city: 'Dongcheng District',
          adCode: '110101',
          spell: 'dongcheng',
        },
        {
          city: 'Xicheng District',
          adCode: '110102',
          spell: 'xicheng',
        },
        {
          city: 'Fangshan District',
          adCode: '110111',
          spell: 'fangshan',
        },
      ],
      hotCities: [
        {
          city: 'Chaoyang District',
          adCode: '110105',
        },
        {
          city: 'Haidian District',
          adCode: '110108',
        },
        {
          city: 'Fengtai District',
          adCode: '110106',
        },
      ],
      success: (res) => {
        my.alert({ title: `The operation succeeded: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `Failed to select the city${JSON.stringify(error)}` })
      },
    })
  },

  self_chooseCity() {
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      cities: [
        {
          city: 'Chaoyang District',
          adCode: '110105',
          spell: 'chaoyang',
        },
        {
          city: 'Haidian District',
          adCode: '110108',
          spell: 'haidian',
        },
        {
          city: 'Fengtai District',
          adCode: '110106',
          spell: 'fengtai',
        },
        {
          city: 'Dongcheng District',
          adCode: '110101',
          spell: 'dongcheng',
        },
        {
          city: 'Xicheng District',
          adCode: '110102',
          spell: 'xicheng',
        },
      ],
      hotCities: [
        {
          city: 'Chaoyang District',
          adCode: '110105',
        },
        {
          city: 'Haidian District',
          adCode: '110108',
        },
        {
          city: 'Fengtai District',
          adCode: '110106',
        },
      ],
      success: (res) => {
        my.alert({ title: `The operation succeeded: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `Failed to select the city${JSON.stringify(error)}` })
      },
    })
  },

  multiLevelSelect() {
    my.multiLevelSelect({
      title: 'Please select a city', // The cascaded selection title.
      list: [
        {
          name: 'Hangzhou City', // The item name.
          subList: [
            {
              name: 'Xihu District',
              subList: [
                {
                  name: 'Wenyi Road',
                },
                {
                  name: 'Wen'er Road'',
                },
                {
                  name: 'Wensan Road',
                },
              ],
            },
            {
              name: 'Binjiang District',
              subList: [
                {
                  name: 'Binhe Road',
                },
                {
                  name: 'Binxing Road',
                },
                {
                  name: 'Baima Lake Anime Square',
                },
              ],
            },
          ], // The cascaded sub-data list.
        },
      ],
      success: (result) => {
        console.log(result)
        my.alert({ content: `Cascaded${JSON.stringify(result)}` })
      },
      fail: (error) => {
        my.alert({ content: `Failed to call${JSON.stringify(error)}` })
      },
    })
  },

  setLocatedCity() {
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      setLocatedCity: true,
      success: (res) => {
        this.setData({
          localcity: res.city,
        })
        my.alert({ title: `chooseAlipayContact response: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `Failed to select the city${JSON.stringify(error)}` })
      },
      complete: () => {
        my.showToast({ content: 'Completion callback' })
      },
    })
    my.onLocatedComplete({
      success: (res) => {
        my.setLocatedCity({
          locatedCityId: res.locatedCityId,
          locatedCityName: this.data.localcity,
          success: (result) => {
            console.log(result)
          },
          fail: (error) => {
            my.alert({
              content: `Failed to change the currently located city${JSON.stringify(error)}`,
            })
          },
        })
      },
      fail: (error) => {
        my.alert({
          content: `onLocatedComplete failed${JSON.stringify(error)}`,
        })
      },
    })
  },
})