全部产品
云市场
云游戏

选择城市

更新时间:2020-05-19 22:25:36

my.chooseCity

该接口用于打开城市选择列表。

入参

入参为 Object 类型,属性如下:

名称 类型 必填 描述
showLocatedCity Boolean 是否显示当前定位城市,默认 false。
showHotCities Boolean 是否显示热门城市,默认 true。
setLocatedCity Boolean 是否修改当前定位城市,默认 false,如果 showLocatedCity 为 false,则此设置无效。
cities Object Array 自定义城市列表,列表内对象字段见下方 自定义城市列表 cities 表。
hotCities Object Array 自定义热门城市列表,列表内对象字段同 cities
success Function 调用成功的回调函数。
fail Function 调用失败的回调函数。
complete Function 调用结束的回调函数(调用成功、失败都会执行)。

自定义城市列表 cities

cities 内对象字段如下所示:

名称 类型 必填 描述
city String 城市名。
adCode String 行政区划代码。不同行政区域对应的代码可参见 中华人民共和国县以上行政区划代码
spell String 城市名对应拼音拼写,方便用户搜索。

代码示例:

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

success 返回值

说明:如果用户没有选择任何城市,直接点击了返回,将不会触发回调函数。

入参为 Object 类型,属性如下:

属性 类型 描述
city String 城市名。
adCode String 行政区划代码。
longitude Number 经度(当前定位城市才会返回)
latitude Number 纬度(当前定位城市才会返回)

代码示例

  1. <!-- API-DEMO page/API/choose-city/choose-city.axml-->
  2. <view class="page">
  3. <view class="page-description">选择城市 API</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">选择城市</button>
  8. </view>
  9. </view>
  10. <view class="page-description">修改当前定位城市的名称 API</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">修改当前定位城市的名称</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:'修改后的城市名',
  20. success: (res) => {
  21. my.alert({ content: '修改当前定位城市成功' + JSON.stringify(res), });
  22. },
  23. fail: (error) => {
  24. my.alert({ content: '修改当前定位城市失败' + JSON.stringify(error), });
  25. },
  26. });
  27. },
  28. fail: (error) => {
  29. my.alert({ content: 'onLocatedComplete失败' + 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

自定义 onLocatedComplete 函数,可以监听该页面地理位置定位完的回调,仅针对 my.chooseCity 中属性 setLocatedCity 为 true 的情况。

入参

名称 类型 描述
success Function 调用成功的回调函数。
fail Function 调用失败的回调函数。
complete Function 调用结束的回调函数(调用成功、失败都会执行)。

返回值

名称 类型 描述
longitude Number 当前定位城市经度。
latitude Number 当前定位城市经度。
locatedCityId String 当前定位城市 ID,修改默认定位城市(setLocatedCity)的时候带上。

返回值示例:

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

代码示例

  1. <!-- API-DEMO page/API/choose-city/choose-city.axml-->
  2. <view class="page">
  3. <view class="page-description">选择城市 API</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">选择城市</button>
  8. </view>
  9. </view>
  10. <view class="page-description">修改当前定位城市的名称 API</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">修改当前定位城市的名称</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:'修改后的城市名',
  20. success: (res) => {
  21. my.alert({ content: '修改当前定位城市成功' + JSON.stringify(res), });
  22. },
  23. fail: (error) => {
  24. my.alert({ content: '修改当前定位城市失败' + JSON.stringify(error), });
  25. },
  26. });
  27. },
  28. fail: (error) => {
  29. my.alert({ content: 'onLocatedComplete失败' + 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

该接口用于修改my.chooseCity中的默认定位城市的名称。

入参

名称 类型 必填 描述
locatedCityId String 当前定位城市 ID,my.chooseCity 接口的 onLocatedComplete 返回。
locatedCityName String 当前定位城市的名称。
locatedCityAdCode String 当前定位城市的行政区划代码,不传值时以控件默认拿到的为准。
locatedCityPinyin String 当前定位城市的拼音,不传值时以控件默认拿到的为准。
success Function 调用成功的回调函数。
fail Function 调用失败的回调函数。
complete Function 调用结束的回调函数(调用成功、失败都会执行)。

fail 返回值

名称 类型 描述
error String 错误码。
errorMessage String 错误描述。

success 返回值

名称 类型 描述
locatedCityName - String 当前定位城市的名称。

错误码

错误码 备注解决方案
11 参数类型错误。 检查参数类型是否正确。
12 必填参数为空。 请确认参数 locatedCityIdlocatedCityName 是否已填写。
13 locatedCityId 不匹配。 请确保与 my.chooseCity 接口的onLocatedCompletelocatedCityId 保持一致。

代码示例

  1. <!-- .axml -->
  2. <view class="page">
  3. <view class="page-description">选择城市</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">选择城市</button>
  8. <button type="primary" onTap="noChooseCity">没有热门/当前城市</button>
  9. <button type="primary" onTap="selfChooseCity">自定义选择的城市</button>
  10. <button type="primary" onTap="self_chooseCity">自定义选择的城市</button>
  11. <button type="primary" onTap="setLocatedCity">setLocatedCity</button>
  12. </view>
  13. </view>
  14. </view>
  1. // .js
  2. Page({
  3. data: {
  4. localcity: '天津',
  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: `选择失败${JSON.stringify(error)}` })
  15. },
  16. complete: () => {
  17. my.showToast({ content: 'complete回调' })
  18. },
  19. })
  20. },
  21. noChooseCity() {
  22. my.chooseCity({
  23. showLocatedCity: false,
  24. showHotCities: false,
  25. success: (res) => {
  26. my.alert({ title: `操作成功: ${JSON.stringify(res)}` })
  27. },
  28. fail: (error) => {
  29. my.alert({ content: `选择失败${JSON.stringify(error)}` })
  30. },
  31. })
  32. },
  33. selfChooseCity() {
  34. my.chooseCity({
  35. cities: [
  36. {
  37. city: '朝阳区',
  38. adCode: '110105',
  39. spell: 'chaoyang',
  40. },
  41. {
  42. city: '海淀区',
  43. adCode: '110108',
  44. spell: 'haidian',
  45. },
  46. {
  47. city: '丰台区',
  48. adCode: '110106',
  49. spell: 'fengtai',
  50. },
  51. {
  52. city: '东城区',
  53. adCode: '110101',
  54. spell: 'dongcheng',
  55. },
  56. {
  57. city: '西城区',
  58. adCode: '110102',
  59. spell: 'xicheng',
  60. },
  61. {
  62. city: '房山区',
  63. adCode: '110111',
  64. spell: 'fangshan',
  65. },
  66. ],
  67. hotCities: [
  68. {
  69. city: '朝阳区',
  70. adCode: '110105',
  71. },
  72. {
  73. city: '海淀区',
  74. adCode: '110108',
  75. },
  76. {
  77. city: '丰台区',
  78. adCode: '110106',
  79. },
  80. ],
  81. success: (res) => {
  82. my.alert({ title: `操作成功: ${JSON.stringify(res)}` })
  83. },
  84. fail: (error) => {
  85. my.alert({ content: `选择失败${JSON.stringify(error)}` })
  86. },
  87. })
  88. },
  89. self_chooseCity() {
  90. my.chooseCity({
  91. showLocatedCity: true,
  92. showHotCities: true,
  93. cities: [
  94. {
  95. city: '朝阳区',
  96. adCode: '110105',
  97. spell: 'chaoyang',
  98. },
  99. {
  100. city: '海淀区',
  101. adCode: '110108',
  102. spell: 'haidian',
  103. },
  104. {
  105. city: '丰台区',
  106. adCode: '110106',
  107. spell: 'fengtai',
  108. },
  109. {
  110. city: '东城区',
  111. adCode: '110101',
  112. spell: 'dongcheng',
  113. },
  114. {
  115. city: '西城区',
  116. adCode: '110102',
  117. spell: 'xicheng',
  118. },
  119. ],
  120. hotCities: [
  121. {
  122. city: '朝阳区',
  123. adCode: '110105',
  124. },
  125. {
  126. city: '海淀区',
  127. adCode: '110108',
  128. },
  129. {
  130. city: '丰台区',
  131. adCode: '110106',
  132. },
  133. ],
  134. success: (res) => {
  135. my.alert({ title: `操作成功: ${JSON.stringify(res)}` })
  136. },
  137. fail: (error) => {
  138. my.alert({ content: `选择失败${JSON.stringify(error)}` })
  139. },
  140. })
  141. },
  142. multiLevelSelect() {
  143. my.multiLevelSelect({
  144. title: '请选择城市', // 级联选择标题
  145. list: [
  146. {
  147. name: '杭州市', // 条目名称
  148. subList: [
  149. {
  150. name: '西湖区',
  151. subList: [
  152. {
  153. name: '文一路',
  154. },
  155. {
  156. name: '文二路',
  157. },
  158. {
  159. name: '文三路',
  160. },
  161. ],
  162. },
  163. {
  164. name: '滨江区',
  165. subList: [
  166. {
  167. name: '滨河路',
  168. },
  169. {
  170. name: '滨兴路',
  171. },
  172. {
  173. name: '白马湖动漫广场',
  174. },
  175. ],
  176. },
  177. ], // 级联子数据列表
  178. },
  179. ],
  180. success: (result) => {
  181. console.log(result)
  182. my.alert({ content: `级联${JSON.stringify(result)}` })
  183. },
  184. fail: (error) => {
  185. my.alert({ content: `调用失败${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: `选择失败${JSON.stringify(error)}` })
  202. },
  203. complete: () => {
  204. my.showToast({ content: 'complete回调' })
  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: `修改当前定位城市失败${JSON.stringify(error)}`,
  218. })
  219. },
  220. })
  221. },
  222. fail: (error) => {
  223. my.alert({
  224. content: `onLocatedComplete失败${JSON.stringify(error)}`,
  225. })
  226. },
  227. })
  228. },
  229. })