@vuemap/vue-amap@vuemap/vue-amap
  • 1.x
  • vue2版本
更新日志
  • github
  • gitee
  • JSAPI文档
  • JSAPI示例地址
  • Loca API文档
  • Loca 示例地址
  • 掘金
  • CSDN
  • 1.x
  • vue2版本
更新日志
  • github
  • gitee
  • JSAPI文档
  • JSAPI示例地址
  • Loca API文档
  • Loca 示例地址
  • 掘金
  • CSDN
@vuemap/vue-amap
@vuemap/vue-amap-loca
@vuemap/vue-amap-extra
  • 基础

    • 简介
    • 安装
    • 脚本初始化
    • 兼容高德原生 SDK
    • Nuxt服务端渲染
    • 捐赠支持
    • 常见问题
    • 从1.x迁移
    • 离线JSAPI
    • 内置API
    • Typescript支持
  • 自定义

    • 自定义地图组件
    • 包装地图组件
  • 地图

    • 地图
    • 获取高德地图实例
    • 地图插件
  • hooks

    • IP定位获取当前城市信息
    • 天气查询服务
    • 定位
  • 控件

    • 比例尺
    • 地图操作工具
    • 地图控制
    • 地图类型切换
    • 鹰眼控件
    • POI搜索
    • 定位
  • 高德官方图层

    • 默认图层
    • 切片图层
    • 实时交通图层
    • 卫星图层
    • 路网图层
    • 建筑楼块3D图层
    • 简易行政区划图
    • 室内图层
  • 行业标准图层

    • WMS图层
    • WMTS图层
    • 矢量瓦片块图层
  • 自有数据图层

    • 矢量标记图层
    • 热力图
    • 标注层
    • 自定义图层
    • 灵活切片图层
    • 图片图层
    • Canvas图层
    • Video图层
    • 3d自定义图层
    • 3DTiles图层
    • 区划聚合图层
    • 自定义瓦片纠偏图层
  • 点标记

    • 点标记
    • 海量标注
    • 文本
    • 灵活点标记
    • 点聚合
    • 海量点
  • 窗体

    • 信息窗体
  • 矢量图形

    • 多边形
    • 折线
    • 贝塞尔曲线
    • 圆形
    • 椭圆
    • 矩形
    • GeoJSON
  • 工具

    • 鼠标工具插件
  • @vuemap/vue-amap-loca组件

    • Loca
    • 环境光
    • 平行光
    • 点光
    • 圆点图层
    • 图标图层
    • 棱柱图层
    • 线图层
    • 面图层
    • 链接线图层
    • 热力图
    • 蜂窝网格图
    • 网格图
    • 贴地点图层
    • 轨迹线图层
    • 连接飞线图层
    • 垂直于大地表面的Marker图层
    • 激光图层
  • @vuemap/vue-amap-extra组件

    • ThreeJS的图层
    • Gltf模型加载
    • 灯光

      • 环境光
      • 平行光
      • 半球光
      • 点光源
      • 聚光灯
    • ThreeJS播放视频
    • ThreeJS面图层
    • 开源3dtiles方案

搜索 (AMap.AutoComplete)

用于进行 POI 搜索联想与数据查询的相关类型

提示

来源 @vuemap/vue-amap 组件库

提示

常见问题

1、搜索框中输入内容,但没有可选的下拉框出现

原因:
一、新版本的key都需要配合安全密钥使用,初始化 initAMapApiLoader 时需要配上安全密钥或安全代理
二、下拉框的默认zIndex较低,当在弹出框中使用时,结果的下拉框会被盖住。下拉框的class为 amap-sug-result, 因此需要增加 .amap-sug-result{z-index:1000}去处理
三、搜索接口的调用次数有限制,可以查看network中搜索请求,看是否超过限制

基础示例

静态属性

仅且可以初始化配置,不支持响应式。

名称类型说明
datatypeString返回的数据类型。可选值:all-返回所有数据类型、poi-返回POI数据类型、bus-返回公交站点数据类型、busline-返回公交线路数据类型目前暂时不支持多种类型
inputIdString可选参数,用来指定一个input输入框,设定之后,在input输入文字将自动生成下拉选择列表。输入框DOM对象的id值
outputIdString可选参数,指定一个现有的div的id或者元素,作为展示提示结果的容器,当指定了input的时候有效,缺省的时候将自动创建一个显示结果面板
outPutDirAutoBoolean默认为true,表示是否在input位于页面较下方的时候自动将输入面板显示在input上方以避免被遮挡
closeResultOnScrollBoolean页面滚动时关闭搜索结果列表,默认 true
langString设置检索语言类型,默认中文 'zh_cn'
inputCustomBoolean是否自定义input,自定义的时候将使用用户的inputId,默认 false
debounceNumber手动加上防抖功能,默认100毫秒
extraOptionsObject额外扩展属性,会直接将属性拷贝到初始化的options中,当key与props内的一样时会被props覆盖

动态属性

支持响应式。

名称类型说明
visibleBoolean是否显示,默认true
typeString输入提示时限定POI类型,多个类型用“
cityString输入提示时限定城市。可选值:城市名(中文或中文全拼)、citycode、adcode;默认值:“全国”
citylimitBoolean是否强制限制在设置的城市内搜索,默认值为:false,true:强制限制设定城市,false:不强制限制设定城市
placeholderString默认输入框的placeholder属性

ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.AutoComplete获取实例

事件

事件参数说明
selectevent鼠标点击或者回车选中某个POI信息时触发此事件
chooseevent鼠标或者键盘上下键选择POI信息时触发此事件

事件回调的event参数

参数类型说明
idStringPOI唯一标识
nameStringname
adcodeString区域编码
districtString所属区域
locationString位置
typeString类型
最后更新时间:
贡献者: gu, guyangyang, gyy
Prev
鹰眼控件
Next
定位