Choose city - Mobile Platform as a Service - Alibaba Cloud Documentation Center

my.chooseCity

This API opens the city selection list.

When you use this Application Programming Interface (API) on iOS to retrieve reverse geocoding information, you must set the Amap location key in the beforeDidFinishLaunchingWithOptions method. The required code is shown below. To obtain an Amap location key, see Get Key.

[LBSmPaaSAdaptor sharedInstance].shouldAMapRegeoWhenLBSFailed = YES;
[AMapServices sharedServices].apiKey = @"Your Amap location key"

Input parameters

The input parameter is an Object. Its properties are as follows:

Name	Type	Required	Description
showLocatedCity	Boolean	No	Specifies whether to display the current city. The default value is false.
showHotCities	Boolean	No	Specifies whether to display popular cities. The default value is true.
setLocatedCity	Boolean	No	Specifies whether to change the current city. The default value is false. If `showLocatedCity` is false, this setting is invalid.
cities	Object Array	No	A custom city list. For the object fields in the list, see the "Custom city list: cities" table below.
hotCities	Object Array	No	A custom list of popular cities. The object fields in the list are the same as those for `cities`.
success	Function	No	The callback function for a successful call.
fail	Function	No	The callback function for a failed call.
complete	Function	No	The callback function that is executed when the call ends, regardless of success or failure.

Custom city list: cities

The object fields in cities are as follows:

Name	Type	Required	Description
city	String	Yes	The city name.
adCode	String	Yes	The administrative region code.
spell	String	Yes	The Pinyin spelling of the city name, which makes it easier for users to search.

Code example:

// .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
    });
  },
});

Success return value

Note

If a user does not select a city and clicks Back, the callback function is not triggered.

The input parameter is an object with the following properties:

Property	Type	Description
city	String	The city name.
adCode	String	The administrative region code.
longitude	Number	The longitude. This is returned only for the current city.
latitude	Number	The latitude. This is returned only for the current city.

Code example

<!-- API-DEMO page/API/choose-city/choose-city.axml -->
<view class="page">
  <view class="page-description">Choose City API</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">Change Current City Name API</view>
  <view class="page-section">
    <view class="page-section-title">my.setLocatedCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="setLocatedCity">Change Current City Name</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:'Modified city name', 
          success: (res) => {
            my.alert({ content: 'Successfully changed the current city: ' + JSON.stringify(res), });
          },
          fail: (error) => {
            my.alert({ content: 'Failed to change the current 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

The custom onLocatedComplete function listens for the callback after the geographical location on the page is determined. This applies only when the setLocatedCity property in my.chooseCity is set to true.

Input parameters

Name	Type	Description
success	Function	The callback function for a successful call.
fail	Function	The callback function for a failed call.
complete	Function	The callback function that is executed when the call ends, regardless of success or failure.

Return value

Name	Type	Description
longitude	Number	The longitude of the current city.
latitude	Number	The longitude of the current city.
locatedCityId	String	The ID of the current city. Include this ID when you change the default city (`setLocatedCity`).

Return value example:

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

Code example

<!-- API-DEMO page/API/choose-city/choose-city.axml -->
<view class="page">
  <view class="page-description">Choose City API</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">Change Current City Name API</view>
  <view class="page-section">
    <view class="page-section-title">my.setLocatedCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="setLocatedCity">Change Current City Name</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:'Modified city name', 
          success: (res) => {
            my.alert({ content: 'Successfully changed the current city: ' + JSON.stringify(res), });
          },
          fail: (error) => {
            my.alert({ content: 'Failed to change the current 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 API changes the name of the default city in my.chooseCity.

Input parameters

Name	Type	Required	Description
locatedCityId	String	Yes	The ID of the current city. This is returned by `onLocatedComplete` of the `my.chooseCity` API.
locatedCityName	String	Yes	The name of the current city.
locatedCityAdCode	String	No	The administrative region code of the current city. If you do not pass a value, the default value obtained by the control is used.
locatedCityPinyin	String	No	The Pinyin of the current city. If you do not pass a value, the default value obtained by the control is used.
success	Function	No	The callback function for a successful call.
fail	Function	No	The callback function for a failed call.
complete	Function	No	The callback function that is executed when the call ends, regardless of success or failure.

Fail return value

Name	Type	Description
error	String	The error code.
errorMessage	String	The error description.

Success return value

Name	Type	Description
locatedCityName	String	The name of the current city.

Error codes

Error code	Description	Solution
11	Incorrect parameter type.	Check if the parameter type is correct.
12	A required parameter is empty.	Confirm that the `locatedCityId` and `locatedCityName` parameters are specified.
13	The locatedCityId does not match.	Make sure the value is the same as the `locatedCityId` from `onLocatedComplete` of the `my.chooseCity` API.

Code example

<!-- .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/Current Cities</button>
      <button type="primary" onTap="selfChooseCity">Custom Cities for Selection</button>
      <button type="primary" onTap="self_chooseCity">Custom Cities for 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: `Selection failed: ${JSON.stringify(error)}` })
      },
      complete: () => {
        my.showToast({ content: 'complete callback' })
      },
    })
  },
  noChooseCity() {
    my.chooseCity({
      showLocatedCity: false,
      showHotCities: false,
      success: (res) => {
        my.alert({ title: `Operation successful: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `Selection failed: ${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: `Operation successful: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `Selection failed: ${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: `Operation successful: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `Selection failed: ${JSON.stringify(error)}` })
      },
    })
  },

  multiLevelSelect() {
    my.multiLevelSelect({
      title: 'Please select a city', // Title of the cascaded selection
      list: [
        {
          name: 'Hangzhou City', // Item name
          subList: [
            {
              name: 'Xihu District',
              subList: [
                {
                  name: 'Wenyi Road',
                },
                {
                  name: 'Wener Road',
                },
                {
                  name: 'Wensan Road',
                },
              ],
            },
            {
              name: 'Binjiang District',
              subList: [
                {
                  name: 'Binhe Road',
                },
                {
                  name: 'Binxing Road',
                },
                {
                  name: 'Baima Lake Animation Plaza',
                },
              ],
            },
          ], // Cascaded sub-data list
        },
      ],
      success: (result) => {
        console.log(result)
        my.alert({ content: `Cascade ${JSON.stringify(result)}` })
      },
      fail: (error) => {
        my.alert({ content: `Call failed: ${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: `Selection failed: ${JSON.stringify(error)}` })
      },
      complete: () => {
        my.showToast({ content: 'complete 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 current city: ${JSON.stringify(error)}`,
            })
          },
        })
      },
      fail: (error) => {
        my.alert({
          content: `onLocatedComplete failed: ${JSON.stringify(error)}`,
        })
      },
    })
  },
})