html输入地址提示错误,高德地图开发之输入框内伴随地址的输入，动态给出地址选择提示...

一、先看效果图：

二、开发流程介绍之高德地图key(地图秘钥生成)值：

1.登录高德开放平台 | 高德地图API    ：https://lbs.amap.com/

2.账号密码登录：

3.登录完成后点击创建新应用按钮：

4.开始创建应用：

5.添加新key(密钥):

6.获取生成的新key值:

提示：如果你能顺利生成最终的秘钥，恭喜你准备工作已经完成。

三、代码截图：

HTML部分：

css代码部分：

js代码部分：

四、手写代码粘贴：

活动报名

/*设置展示页input框 placeholder样式*/

#active_palce::-webkit-input-placeholder,{

/* placeholder颜色  */

color:#26A2FF;

/* placeholder字体大小  */

font-size: 14px;

/* placeholder位置  */

text-align: center;

}

/*设置模态框里的input的placeholder样式*/

.textAddressValue--iiotWj9S input::-webkit-input-placeholder{

color:#0d7c21;

}

活动地点：

aria-labelledby="myModalLabel" style="position:fixed;top:0%;">

设置地点

确定

//6.活动地点填写 添加模态框显示属性

$(".textAddress--zA6EmEUo").attr({"data-toggle":"modal","data-target":"#myActivePlace"});

//移除其自带的input样式属性

$(".searchInput--2zMXafMM").removeClass("searchInput--2zMXafMM input");

//实现地址输入后，系统给与自动选择提示

$("#active_palce").on("keyup",function(){

//获取input框输入内容,1.当做参数放到url接口；2.当参数提交

var  palceS=$(this).val();

$.ajax({

type:"POST",

url:"https://restapi.amap.com/v3/assistant/inputtips?keywords="+palceS+"&key="+"f813d0b9a2b32f92058036772b42ee34",

data:{keywords:palceS},

success:function(data){

console.log(data,"获取数据");

//判断是可以成功的返回搜索到，输入内容的提示

if(data.info=="OK" && data.status==1){

var tipsS=data.tips;

var html="";

for(var i=0;i

var tipsS1=tipsS[i];

//动态生成  高德地图返回的数据

html+=`

${tipsS1.name}

所属区域：${tipsS1.district}

详细地址：${tipsS1.address}

`;

}

$(".mapList--3YFTVpBD .mapItem--u6uUJdup .mapCnt--3RrcN87N").html(html);

}else{

alert("抱歉，没有找到您要所搜的地址！");

}

},

error:function(err){

alert("请求错误！");

}

});

});

//根据提示进行地址选择，并赋值到input框

$(".mapCnt--3RrcN87N").on("click",".SiteSelection",function(){

var pitchOn_address=$(this).children().eq(2).text();

//数据切割，选择想要的后半部分 pitchOn_address1[1]="${tipsS1.address}"，舍弃用不到的前半部分pitchOn_address1[0]="详细地址"

var pitchOn_address1=pitchOn_address.split("：");

//判断高德题图是否返回详细地址，

if(pitchOn_address1[1]!=""){

//赋值

$("#active_palce").val(pitchOn_address1[1]);

}else{

//详细地址为空提示

$("#active_palce").val("详细地址为空，请重新选择！");

}

});

//将选择的地址显示到活动发布页面

$(".btn-span").on("click",function(){

var palceVal=$("#active_palce").val();

if(palceVal!=""){

//赋值

$(".textAddressValue--iiotWj9S input").val(palceVal);

//关闭模态框

$("#myActivePlace").modal('hide');

}else{

//未选择提示

$("#active_palce").val("还未选择活动地址信息！");

}

});

五、要点提示：

1.首先 地址填写的input 的，地址提示，要使用keyup(onkeyup)键盘按下事件，效果更佳。 2. ajax的 url:"https://restapi.amap.com/v3/assistant/inputtips?keywords="+palceS+"&key="+"f813d0b9a2b32f92058036772b42ee34",

https://restapi.amap.com/v3/assistant/inputtips? 默认填写，调用高德地图。keywords参数是input框输入的内容。key是准备阶段获取的秘钥key。

高德地图接口详情，详情点击 https://lbs.amap.com/api/webservice/guide/api/inputtips/

提示：本代码可以直接复制粘贴使用，前提是正确引用jquery.js等插件库。样式于水平有限，请见谅。本文档仅供初学者或首次开发者提供 参考。如代码有错误之处，请见谅。如果有更好的开发经验，感谢回复。谢谢观看！！！；