All Products
Search
Document Center

Choose city

Last Updated: Feb 05, 2021

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.

 
  1. [LBSmPaaSAdaptor sharedInstance].shouldAMapRegeoWhenLBSFailed = YES;
  2. [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. For the object fields in the list, see the cities table below.
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. For the list of administrative area codes, see Administrative Area Codes for the County Level and Above in the People’s Republic of China.
spell String Yes The city name in Pinyin, which facilitates user search.

Sample code

 
  1. //.js
  2. my.chooseCity({
  3. cities: [
  4. {
  5. city: 'Chaoyang District',
  6. adCode: '110105',
  7. spell: 'chaoyang'
  8. },
  9. {
  10. city: 'Haidian District',
  11. adCode: '110108',
  12. spell: 'haidian'
  13. },
  14. {
  15. city: 'Fengtai District',
  16. adCode: '110106',
  17. spell: 'fengtai'
  18. },
  19. {
  20. city: 'Dongcheng District',
  21. adCode: '110101',
  22. spell: 'dongcheng'
  23. },
  24. {
  25. city: 'Xicheng District',
  26. adCode: '110102',
  27. spell: 'xicheng'
  28. },
  29. {
  30. city: 'Fangshan District',
  31. adCode: '110111',
  32. spell: 'fangshan'
  33. }
  34. ],
  35. hotCities: [
  36. {
  37. city: 'Chaoyang District',
  38. adCode: '110105'
  39. },
  40. {
  41. city: 'Haidian District',
  42. adCode: '110108'
  43. },
  44. {
  45. city: 'Fengtai District',
  46. adCode: '110106'
  47. }
  48. ],
  49. success: (res) => {
  50. my.alert({
  51. content: res.city + ':' + res.adCode
  52. });
  53. },
  54. });

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

 
  1. <!-- API-DEMO page/API/choose-city/choose-city.axml-->
  2. <view class="page">
  3. <view class="page-description">The API for selecting a city</view>
  4. <view class="page-section">
  5. <view class="page-section-title">my.chooseCity</view>
  6. <view class="page-section-demo">
  7. <button type="primary" onTap="chooseCity">Choose city</button>
  8. </view>
  9. </view>
  10. <view class="page-description">The API for changing the currently located city</view>
  11. <view class="page-section">
  12. <view class="page-section-title">my.setLocatedCity</view>
  13. <view class="page-section-demo">
  14. <button type="primary" onTap="setLocatedCity">Change the name of the currently located city</button>
  15. </view>
  16. </view>
  17. </view>
 
  1. // API-DEMO page/choose-city/choose-city.js
  2. Page({
  3. chooseCity() {
  4. my.chooseCity({
  5. showLocatedCity: true,
  6. showHotCities: true,
  7. success: (res) => {
  8. my.alert({
  9. title: 'chooseCity response: ' + JSON.stringify(res),
  10. });
  11. },
  12. });
  13. },
  14. setLocatedCity() {
  15. my.onLocatedComplete({
  16. success: (res) => {
  17. my.setLocatedCity({
  18. locatedCityId:res.locatedCityId,//res.locatedCityId
  19. locatedCityName:'The changed city name',
  20. success: (res) => {
  21. my.alert({ content: 'Changed the currently located city successfully' + JSON.stringify(res), });
  22. },
  23. fail: (error) => {
  24. my.alert({ content: 'Failed to change the currently located city' + JSON.stringify(error), });
  25. },
  26. });
  27. },
  28. fail: (error) => {
  29. my.alert({ content: 'onLocatedComplete failed' + JSON.stringify(error), });
  30. }
  31. });
  32. my.chooseCity({
  33. showLocatedCity: true,
  34. showHotCities: true,
  35. setLocatedCity: true,
  36. success: (res) => {
  37. my.alert({
  38. title: 'chooseCity response: ' + JSON.stringify(res),
  39. });
  40. },
  41. });
  42. },
  43. });

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:

 
  1. {
  2. longitude:100.3,
  3. latitude:30.1,
  4. locatedCityId:""
  5. }

Sample code

 
  1. <!-- API-DEMO page/API/choose-city/choose-city.axml-->
  2. <view class="page">
  3. <view class="page-description">The API for selecting a city</view>
  4. <view class="page-section">
  5. <view class="page-section-title">my.chooseCity</view>
  6. <view class="page-section-demo">
  7. <button type="primary" onTap="chooseCity">Choose city</button>
  8. </view>
  9. </view>
  10. <view class="page-description">The API for changing the currently located city</view>
  11. <view class="page-section">
  12. <view class="page-section-title">my.setLocatedCity</view>
  13. <view class="page-section-demo">
  14. <button type="primary" onTap="setLocatedCity">Change the name of the currently located city</button>
  15. </view>
  16. </view>
  17. </view>
 
  1. // API-DEMO page/choose-city/choose-city.js
  2. Page({
  3. chooseCity() {
  4. my.chooseCity({
  5. showLocatedCity: true,
  6. showHotCities: true,
  7. success: (res) => {
  8. my.alert({
  9. title: 'chooseCity response: ' + JSON.stringify(res),
  10. });
  11. },
  12. });
  13. },
  14. setLocatedCity() {
  15. my.onLocatedComplete({
  16. success: (res) => {
  17. my.setLocatedCity({
  18. locatedCityId:res.locatedCityId,//res.locatedCityId
  19. locatedCityName:'The changed city name',
  20. success: (res) => {
  21. my.alert({ content: 'Changed the currently located city successfully' + JSON.stringify(res), });
  22. },
  23. fail: (error) => {
  24. my.alert({ content: 'Failed to change the currently located city' + JSON.stringify(error), });
  25. },
  26. });
  27. },
  28. fail: (error) => {
  29. my.alert({ content: 'onLocatedComplete failed' + JSON.stringify(error), });
  30. }
  31. });
  32. my.chooseCity({
  33. showLocatedCity: true,
  34. showHotCities: true,
  35. setLocatedCity: true,
  36. success: (res) => {
  37. my.alert({
  38. title: 'chooseCity response: ' + JSON.stringify(res),
  39. });
  40. },
  41. });
  42. },
  43. });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

 
  1. <!-- .axml -->
  2. <view class="page">
  3. <view class="page-description">Choose city</view>
  4. <view class="page-section">
  5. <view class="page-section-title">chooseCity</view>
  6. <view class="page-section-demo">
  7. <button type="primary" onTap="chooseCity">Choose city</button>
  8. <button type="primary" onTap="noChooseCity">No popular or current city</button>
  9. <button type="primary" onTap="selfChooseCity">Customize the city selection</button>
  10. <button type="primary" onTap="self_chooseCity">Customize the city selection</button>
  11. <button type="primary" onTap="setLocatedCity">setLocatedCity</button>
  12. </view>
  13. </view>
  14. </view>
 
  1. // .js
  2. Page({
  3. data: {
  4. localcity: 'Tianjin',
  5. },
  6. chooseCity() {
  7. my.chooseCity({
  8. showLocatedCity: true,
  9. showHotCities: true,
  10. success: (res) => {
  11. my.alert({ title: `chooseAlipayContact response: ${JSON.stringify(res)}` })
  12. },
  13. fail: (error) => {
  14. my.alert({ content: `Failed to select the city${JSON.stringify(error)}` })
  15. },
  16. complete: () => {
  17. my.showToast({ content: 'Completion callback' })
  18. },
  19. })
  20. },
  21. noChooseCity() {
  22. my.chooseCity({
  23. showLocatedCity: false,
  24. showHotCities: false,
  25. success: (res) => {
  26. my.alert({ title: `The operation has succeeded: ${JSON.stringify(res)}` })
  27. },
  28. fail: (error) => {
  29. my.alert({ content: `Failed to select the city${JSON.stringify(error)}` })
  30. },
  31. })
  32. },
  33. selfChooseCity() {
  34. my.chooseCity({
  35. cities: [
  36. {
  37. city: 'Chaoyang District',
  38. adCode: '110105',
  39. spell: 'chaoyang',
  40. },
  41. {
  42. city: 'Haidian District',
  43. adCode: '110108',
  44. spell: 'haidian',
  45. },
  46. {
  47. city: 'Fengtai District',
  48. adCode: '110106',
  49. spell: 'fengtai',
  50. },
  51. {
  52. city: 'Dongcheng District',
  53. adCode: '110101',
  54. spell: 'dongcheng',
  55. },
  56. {
  57. city: 'Xicheng District',
  58. adCode: '110102',
  59. spell: 'xicheng',
  60. },
  61. {
  62. city: 'Fangshan District',
  63. adCode: '110111',
  64. spell: 'fangshan',
  65. },
  66. ],
  67. hotCities: [
  68. {
  69. city: 'Chaoyang District',
  70. adCode: '110105',
  71. },
  72. {
  73. city: 'Haidian District',
  74. adCode: '110108',
  75. },
  76. {
  77. city: 'Fengtai District',
  78. adCode: '110106',
  79. },
  80. ],
  81. success: (res) => {
  82. my.alert({ title: `The operation succeeded: ${JSON.stringify(res)}` })
  83. },
  84. fail: (error) => {
  85. my.alert({ content: `Failed to select the city${JSON.stringify(error)}` })
  86. },
  87. })
  88. },
  89. self_chooseCity() {
  90. my.chooseCity({
  91. showLocatedCity: true,
  92. showHotCities: true,
  93. cities: [
  94. {
  95. city: 'Chaoyang District',
  96. adCode: '110105',
  97. spell: 'chaoyang',
  98. },
  99. {
  100. city: 'Haidian District',
  101. adCode: '110108',
  102. spell: 'haidian',
  103. },
  104. {
  105. city: 'Fengtai District',
  106. adCode: '110106',
  107. spell: 'fengtai',
  108. },
  109. {
  110. city: 'Dongcheng District',
  111. adCode: '110101',
  112. spell: 'dongcheng',
  113. },
  114. {
  115. city: 'Xicheng District',
  116. adCode: '110102',
  117. spell: 'xicheng',
  118. },
  119. ],
  120. hotCities: [
  121. {
  122. city: 'Chaoyang District',
  123. adCode: '110105',
  124. },
  125. {
  126. city: 'Haidian District',
  127. adCode: '110108',
  128. },
  129. {
  130. city: 'Fengtai District',
  131. adCode: '110106',
  132. },
  133. ],
  134. success: (res) => {
  135. my.alert({ title: `The operation succeeded: ${JSON.stringify(res)}` })
  136. },
  137. fail: (error) => {
  138. my.alert({ content: `Failed to select the city${JSON.stringify(error)}` })
  139. },
  140. })
  141. },
  142. multiLevelSelect() {
  143. my.multiLevelSelect({
  144. title: 'Please select a city', // The cascaded selection title.
  145. list: [
  146. {
  147. name: 'Hangzhou City', // The item name.
  148. subList: [
  149. {
  150. name: 'Xihu District',
  151. subList: [
  152. {
  153. name: 'Wenyi Road',
  154. },
  155. {
  156. name: 'Wen'er Road'',
  157. },
  158. {
  159. name: 'Wensan Road',
  160. },
  161. ],
  162. },
  163. {
  164. name: 'Binjiang District',
  165. subList: [
  166. {
  167. name: 'Binhe Road',
  168. },
  169. {
  170. name: 'Binxing Road',
  171. },
  172. {
  173. name: 'Baima Lake Anime Square',
  174. },
  175. ],
  176. },
  177. ], // The cascaded sub-data list.
  178. },
  179. ],
  180. success: (result) => {
  181. console.log(result)
  182. my.alert({ content: `Cascaded${JSON.stringify(result)}` })
  183. },
  184. fail: (error) => {
  185. my.alert({ content: `Failed to call${JSON.stringify(error)}` })
  186. },
  187. })
  188. },
  189. setLocatedCity() {
  190. my.chooseCity({
  191. showLocatedCity: true,
  192. showHotCities: true,
  193. setLocatedCity: true,
  194. success: (res) => {
  195. this.setData({
  196. localcity: res.city,
  197. })
  198. my.alert({ title: `chooseAlipayContact response: ${JSON.stringify(res)}` })
  199. },
  200. fail: (error) => {
  201. my.alert({ content: `Failed to select the city${JSON.stringify(error)}` })
  202. },
  203. complete: () => {
  204. my.showToast({ content: 'Completion callback' })
  205. },
  206. })
  207. my.onLocatedComplete({
  208. success: (res) => {
  209. my.setLocatedCity({
  210. locatedCityId: res.locatedCityId,
  211. locatedCityName: this.data.localcity,
  212. success: (result) => {
  213. console.log(result)
  214. },
  215. fail: (error) => {
  216. my.alert({
  217. content: `Failed to change the currently located city${JSON.stringify(error)}`,
  218. })
  219. },
  220. })
  221. },
  222. fail: (error) => {
  223. my.alert({
  224. content: `onLocatedComplete failed${JSON.stringify(error)}`,
  225. })
  226. },
  227. })
  228. },
  229. })