灵犀科技 高端网站建设首页,网上超市商城,科技对人类的意义,打开现场直播今天需要一个坐标拾取器#xff0c;需要一个输入框输入模糊地址能筛选的功能 查看官方文档#xff0c;有一个api可以直接满足我们的需求
AMap.Autocomplete
上代码
AMapLoader.load({key: 你的key, // 申请好的Web端开发者Key#xff0c;首次调… 今天需要一个坐标拾取器需要一个输入框输入模糊地址能筛选的功能 查看官方文档有一个api可以直接满足我们的需求
AMap.Autocomplete
上代码
AMapLoader.load({key: 你的key, // 申请好的Web端开发者Key首次调用 load 时必填version: 2.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins: [AMap.AutoComplete], //插件列表}).then((AMap) {var map new AMap.Map(container, {resizeEnable: true,zoom: 12,center: [120.060354, 30.287619],});AMap.plugin(AMap.AutoComplete, function () {var autoOptions {city: 010,input: tipinput, //下面设置的input的idoutPutDirAuto: true,}var AutoComplete new AMap.AutoComplete(autoOptions);console.log(AutoComplete, AutoComplete)AutoComplete.search(function (status: any, result: any) {// 搜索成功时result即是对应的匹配数据})})}).catch((e) {console.error(e);}); div classNameinput-item-prependspan classNameinput-item-text style{{ width: 100px }}请输入关键字/span
/div
input idtipinput typetext nametext style{{ width: 100, height: 30 }} /
一开始使用遇到一个问题是使用AMap.Autocomplete会报错
TypeError: AMap.Autocomplete is not a constructor
(anonymous function)
.ant-design-pro/src/pages/yyMapManage/index.tsx:7471 | input: tipinput,72 | outPutDirAuto: true,73 | }74 | var Autocomplete new AMap.Autocomplete(autoOptions);| ^ 75 | console.log(Autocomplete, Autocomplete)76 | Autocomplete.search(function (status: any, result: any) {77 | console.log(first) 这时候 Autocomplete注意一下大小写 换成AutoComplete之后正常显示
但是这时候问题又出现了input框输入没有反应 重新看一遍文档发现还是太心急了很多问题其实文档里都写了只是平时直接拿起来用只看了那一段就会导致别的地方缺胳膊少腿
需要添加秘钥 script typetext/javascriptwindow._AMapSecurityConfig { securityJsCode: 你的key, }
/script
成功显示模糊查询地址
