一、先看效果图：
二、开发流程介绍之高德地图key(地图秘钥生成)值：
1.登录高德开放平台 | 高德地图API ：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">
<!-- 移动web页面自动探测电话号码 -->
<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 id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div> -->
</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/
提示：本代码可以直接复制粘贴使用，前提是正确引用jquery.js等插件库。样式于水平有限，请见谅。本文档仅供初学者或首次开发者提供 参考。如代码有错误之处，请见谅。如果有更好的开发经验，感谢回复。谢谢观看！！！；
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
