选择城市

my.chooseCity

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

在 iOS 端使用此 API 时,若要获取逆地理信息,需要在 beforeDidFinishLaunchingWithOptions 方法中设置高德定位的 key,所需代码如下所示。请参考 获取 Key 文档以获得高德定位的 Key。

[LBSmPaaSAdaptor sharedInstance].shouldAMapRegeoWhenLBSFailed = YES;
[AMapServices sharedServices].apiKey = @"高德定位的 Key"

入参

入参为 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

城市名对应拼音拼写,方便用户搜索。

代码示例:

//.js
my.chooseCity({
  cities: [
    {
      city: '朝阳区',
      adCode: '110105',
      spell: 'chaoyang'
    },
    {
      city: '海淀区',
      adCode: '110108',
      spell: 'haidian'
    },
    {
      city: '丰台区',
      adCode: '110106',
      spell: 'fengtai'
    },
    {
      city: '东城区',
      adCode: '110101',
      spell: 'dongcheng'
    },
    {
      city: '西城区',
      adCode: '110102',
      spell: 'xicheng'
    },
    {
      city: '房山区',
      adCode: '110111',
      spell: 'fangshan'
    }
  ],
  hotCities: [
    {
      city: '朝阳区',
      adCode: '110105'
    },
    {
      city: '海淀区',
      adCode: '110108'
    },
    {
      city: '丰台区',
      adCode: '110106'
    }
  ],
  success: (res) => {
    my.alert({
      content: res.city + ':' + res.adCode
    });
  },
});

success 返回值

说明

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

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

属性

类型

描述

city

String

城市名。

adCode

String

行政区划代码。

longitude

Number

经度(当前定位城市才会返回)

latitude

Number

纬度(当前定位城市才会返回)

代码示例

<!-- API-DEMO page/API/choose-city/choose-city.axml-->
<view class="page">
  <view class="page-description">选择城市 API</view>
  <view class="page-section">
    <view class="page-section-title">my.chooseCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="chooseCity">选择城市</button>
    </view>
  </view>
  <view class="page-description">修改当前定位城市的名称 API</view>
  <view class="page-section">
    <view class="page-section-title">my.setLocatedCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="setLocatedCity">修改当前定位城市的名称</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:'修改后的城市名', 
          success: (res) => {
            my.alert({ content: '修改当前定位城市成功' + JSON.stringify(res), });
          },
          fail: (error) => {
            my.alert({ content: '修改当前定位城市失败' + JSON.stringify(error), });
          },
        });
      },
      fail: (error) => {
        my.alert({ content: 'onLocatedComplete失败' + JSON.stringify(error), });
      }
    });
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      setLocatedCity: true,
      success: (res) => {
        my.alert({
          title: 'chooseCity response: ' + JSON.stringify(res),
        });
      },
    });
  },
});

my.onLocatedComplete

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

入参

名称

类型

描述

success

Function

调用成功的回调函数。

fail

Function

调用失败的回调函数。

complete

Function

调用结束的回调函数(调用成功、失败都会执行)。

返回值

名称

类型

描述

longitude

Number

当前定位城市经度。

latitude

Number

当前定位城市经度。

locatedCityId

String

当前定位城市 ID,修改默认定位城市(setLocatedCity)的时候带上。

返回值示例:

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

代码示例

<!-- API-DEMO page/API/choose-city/choose-city.axml-->
<view class="page">
  <view class="page-description">选择城市 API</view>
  <view class="page-section">
    <view class="page-section-title">my.chooseCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="chooseCity">选择城市</button>
    </view>
  </view>
  <view class="page-description">修改当前定位城市的名称 API</view>
  <view class="page-section">
    <view class="page-section-title">my.setLocatedCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="setLocatedCity">修改当前定位城市的名称</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:'修改后的城市名', 
          success: (res) => {
            my.alert({ content: '修改当前定位城市成功' + JSON.stringify(res), });
          },
          fail: (error) => {
            my.alert({ content: '修改当前定位城市失败' + JSON.stringify(error), });
          },
        });
      },
      fail: (error) => {
        my.alert({ content: 'onLocatedComplete失败' + JSON.stringify(error), });
      }
    });
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      setLocatedCity: true,
      success: (res) => {
        my.alert({
          title: 'chooseCity response: ' + JSON.stringify(res),
        });
      },
    });
  },
});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 保持一致。

代码示例

<!-- .axml -->
<view class="page">
  <view class="page-description">选择城市</view>
  <view class="page-section">
    <view class="page-section-title">chooseCity</view>
    <view class="page-section-demo">
      <button type="primary" onTap="chooseCity">选择城市</button>
      <button type="primary" onTap="noChooseCity">没有热门/当前城市</button>
      <button type="primary" onTap="selfChooseCity">自定义选择的城市</button>
      <button type="primary" onTap="self_chooseCity">自定义选择的城市</button>
      <button type="primary" onTap="setLocatedCity">setLocatedCity</button>
    </view>
  </view>
</view>
// .js
Page({
  data: {
    localcity: '天津',
  },
  chooseCity() {
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      success: (res) => {
        my.alert({ title: `chooseAlipayContact response: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `选择失败${JSON.stringify(error)}` })
      },
      complete: () => {
        my.showToast({ content: 'complete回调' })
      },
    })
  },
  noChooseCity() {
    my.chooseCity({
      showLocatedCity: false,
      showHotCities: false,
      success: (res) => {
        my.alert({ title: `操作成功: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `选择失败${JSON.stringify(error)}` })
      },
    })
  },
  selfChooseCity() {
    my.chooseCity({
      cities: [
        {
          city: '朝阳区',
          adCode: '110105',
          spell: 'chaoyang',
        },
        {
          city: '海淀区',
          adCode: '110108',
          spell: 'haidian',
        },
        {
          city: '丰台区',
          adCode: '110106',
          spell: 'fengtai',
        },
        {
          city: '东城区',
          adCode: '110101',
          spell: 'dongcheng',
        },
        {
          city: '西城区',
          adCode: '110102',
          spell: 'xicheng',
        },
        {
          city: '房山区',
          adCode: '110111',
          spell: 'fangshan',
        },
      ],
      hotCities: [
        {
          city: '朝阳区',
          adCode: '110105',
        },
        {
          city: '海淀区',
          adCode: '110108',
        },
        {
          city: '丰台区',
          adCode: '110106',
        },
      ],
      success: (res) => {
        my.alert({ title: `操作成功: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `选择失败${JSON.stringify(error)}` })
      },
    })
  },

  self_chooseCity() {
    my.chooseCity({
      showLocatedCity: true,
      showHotCities: true,
      cities: [
        {
          city: '朝阳区',
          adCode: '110105',
          spell: 'chaoyang',
        },
        {
          city: '海淀区',
          adCode: '110108',
          spell: 'haidian',
        },
        {
          city: '丰台区',
          adCode: '110106',
          spell: 'fengtai',
        },
        {
          city: '东城区',
          adCode: '110101',
          spell: 'dongcheng',
        },
        {
          city: '西城区',
          adCode: '110102',
          spell: 'xicheng',
        },
      ],
      hotCities: [
        {
          city: '朝阳区',
          adCode: '110105',
        },
        {
          city: '海淀区',
          adCode: '110108',
        },
        {
          city: '丰台区',
          adCode: '110106',
        },
      ],
      success: (res) => {
        my.alert({ title: `操作成功: ${JSON.stringify(res)}` })
      },
      fail: (error) => {
        my.alert({ content: `选择失败${JSON.stringify(error)}` })
      },
    })
  },

  multiLevelSelect() {
    my.multiLevelSelect({
      title: '请选择城市', // 级联选择标题
      list: [
        {
          name: '杭州市', // 条目名称
          subList: [
            {
              name: '西湖区',
              subList: [
                {
                  name: '文一路',
                },
                {
                  name: '文二路',
                },
                {
                  name: '文三路',
                },
              ],
            },
            {
              name: '滨江区',
              subList: [
                {
                  name: '滨河路',
                },
                {
                  name: '滨兴路',
                },
                {
                  name: '白马湖动漫广场',
                },
              ],
            },
          ], // 级联子数据列表
        },
      ],
      success: (result) => {
        console.log(result)
        my.alert({ content: `级联${JSON.stringify(result)}` })
      },
      fail: (error) => {
        my.alert({ content: `调用失败${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: `选择失败${JSON.stringify(error)}` })
      },
      complete: () => {
        my.showToast({ content: 'complete回调' })
      },
    })
    my.onLocatedComplete({
      success: (res) => {
        my.setLocatedCity({
          locatedCityId: res.locatedCityId,
          locatedCityName: this.data.localcity,
          success: (result) => {
            console.log(result)
          },
          fail: (error) => {
            my.alert({
              content: `修改当前定位城市失败${JSON.stringify(error)}`,
            })
          },
        })
      },
      fail: (error) => {
        my.alert({
          content: `onLocatedComplete失败${JSON.stringify(error)}`,
        })
      },
    })
  },
})
阿里云首页 移动开发平台 mPaaS 相关技术圈