高德地图开发之输入框内伴随地址的输入，动态给出地址选择提示 - 好文

一、先看效果图：

二、开发流程介绍之高德地图key(地图秘钥生成)值：
1.登录高德开放平台 | 高德地图API
<https://www.baidu.com/link?url=udxiiJtC60FzPYHqMfHc560oE7_CGcq98ZjR4cbvyd7&wd=&eqid=9f951552000145fa000000035b61ae5e>
：https://lbs.amap.com/ <https://lbs.amap.com/>

2.账号密码登录：

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

4.开始创建应用：

5.添加新key(密钥):

6.获取生成的新key值:

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

三、代码截图：

HTML部分：

css代码部分：

js代码部分：

四、手写代码粘贴：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, minimum-scale=1, user-scalable=no">
   <meta name="msapplication-tap-highlight" content="no">
   
   <meta name="format-detection" content="telephone=no">
   <meta http-equiv="x-rim-auto-match" content="none">
   <meta http-equiv="Content-Security-Policy" content="">
   <meta http-equiv="cleartype" content="on">
   <meta name="renderer" content="webkit">
   <meta name="force-rendering" content="webkit">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="app-version" content="1.13.3">
   <meta name="author" content="xin xiao yong">
   <title>活动报名</title>
   <link rel="stylesheet" href="__ROOT__/homes/css/bootstrap.min.css">

   <script src="__ROOT__/homes/js/jquery-1.11.1.min.js"
type="text/javascript"></script>
<script src="__ROOT__/homes/js/bootstrap.min.js" type="text/javascript"
charset="utf-8"></script>
<script src="__ROOT__/homes/js/common.js" type="text/javascript"></script>
<script src="__ROOT__/homes/js/browser_check.js" type="text/javascript"
></script>
<script src="__ROOT__/homes/js/mui.min.js"
type="text/javascript"></script>
<script src="__ROOT__/homes/js/laydate.js"
type="text/javascript"></script>

<style type="text/css">

/*设置展示页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;
}

</style>

</head>
<body>


<div class="textAddress--zA6EmEUo">
<div><div class="textAddressLabel--3Magq49T">活动地点：</div></div>
<div class="textAddressValue--iiotWj9S"> <input placeholder="点击设置地点"
value="" readonly="readonly" style="width: 100%;"></div>
</div>


              <div class="showPlace">
                  <div class="modal fade" id="myActivePlace"
role="dialog"
           aria-labelledby="myModalLabel"
style="position:fixed;top:0%;">
           <div class="modal-dialog modal-lg">
           <div class="modal-content integralPart"
style="width:106%;height:669px;margin:-3%;overflow-y: scroll;">

           <div class="modal-header"
style="padding:0px;">
           <header class="mint-header"
style="width:107%;position:fixed;top:0px;left:-4%;z-index:15;">
               <div class="mint-header-button
is-left" data-dismiss="modal"><div><i slot="icon"
class="icon-arrow-left"></i></div></div>
               <h1
class="mint-header-title">设置地点</h1>
               <div class="mint-header-button
is-right"><div class="btn-div"><span class="btn-span">确定</span></div></div>
           </header>
           </div>

           <div class="modal-body">
               
               <div class="searchInput--2zMXafMM"
style="z-index:15;">
                   <input type="text"
name="active_palce" id="active_palce" class="form-control"
placeholder="请输入活动举办地址信息" autofocus="autofocus"
style="color:#046604;position:fixed;top:93px;z-index:20;width:95%;">
                   
               </div>
               
           <div class="mapList--3YFTVpBD"
style="margin-top:86.2px;" >
               <div class="mapItem--u6uUJdup"
style="border-bottom:none;">
                   <div class='mapCnt--3RrcN87N'>

                   </div>
               </div>
           </div>

           </div>
           </div>
           </div>
           </div>
              </div>

   <script type="text/javascript">



//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<tipsS.length;i++){
                               var tipsS1=tipsS[i];
                               //动态生成高德地图返回的数据
                               html+=`
                                   <div class="SiteSelection"
style="border-top:1px solid
#F0F0F0;background:rgba(230,230,230,.1);height:12%;">
               <div class='mapName--fPsccdMe'
style="color:#1E8AD2;margin-top:15px;">${tipsS1.name}</div>
               <div class='mapDesc--35nAL75H'
style="color:#000;font-size:.30rem;">所属区域：${tipsS1.district}</div>
               <div
style="font-size:.24rem;">详细地址：${tipsS1.address}</div>
           </div>

                               `;
                           }
                           $(".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("还未选择活动地址信息！");
               }

           });

</script>

</body>
</html>

五、要点提示：

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/
<https://lbs.amap.com/api/webservice/guide/api/inputtips/>

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

热门工具换一换