微信web网页动态增减输入框,搜索框,基于jQuery weui、jQuery 实现无限插入数据,动态数据生成,外加高德地图POI和根据坐标获取位置信息的页面

微信扫一扫,分享到朋友圈

微信web网页动态增减输入框,搜索框,基于jQuery weui、jQuery 实现无限插入数据,动态数据生成,外加高德地图POI和根据坐标获取位置信息的页面

如题,搞了一天终于搞好了,老板说不用,哎,头疼!

本页内容主要是jQuery 动态插入dom元素,和动态获取input等form表单输入框的值。高德地图看看就好了,想要开发还得靠api。

页面是基于tp5开发的,{extend name=”/baseyjs”} 就把html、body、需要引入的js,css等提前放到一个模板里,这里直接拿过来用就行了,另外该页面是微信web页面,里面也用到了jssdk,使用微信来获取位置信息,所以如果要开发网页版的话,位置信息需要自己修改,本文不再另做阐述。

{extend name="/baseyjs"}
{block name="title"}<title></title>{/block}
{block name="style"}<style>html,body{background:#f5f5f5;
}*{box-sizing:border-box;
}.wrap{
}.wrap .item{width:98%;margin:5px auto;background:#fff;padding:5px;border-radius:5px;
}.wrap form:first-child .item{margin-top:0px;
}.wrap form:last-child .item{margin-bottom:0;
}.wrap .item .title{display:flex;justify-content:center;align-items:center;
}.wrap .item .title label{width:20%;font-size:14px;color:#333;text-align:center;height:30px;line-height:30px;
}.wrap .item .title input{border:none;height:30px;font-size:16px;outline:none;
}.wrap .item .row{display:flex;justify-content:space-between;border:1px solid #ddd;border-radius:5px;margin:5px 0;
}.wrap .item .row select{width:20%;height:30px;text-align:center;text-align-last:center;border:none;background:transparent;font-size:15px;
}.wrap .item .row input{width:70%;height:30px;border:none;outline:none;border-left:1px solid #ddd;font-size:16px;padding-left:10px;
}.wrap .item .row .iconfont{width:10%;height:30px;line-height:30px;text-align:center;
}.wrap .item .btns{display:flex;justify-content:center;align-items:center;
}.weui-btn+.weui-btn{margin-top:0px;
}.outbox{position:absolute;left:0;top:0;width:100%;height:100%;z-index:99;display:none;
}.outbox #container{
}#panel{position:absolute;bottom:0;right:0;overflow:auto;width:100%;z-index:999;border-left:1px solid #eaeaea;background:#fff;
}#searchBar{height:30px;background:#ccc;
}#searchInput{width:100%;height:30px;line-height:30%;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;border-bottom:1px solid #ccc;padding:0 5px;
}#searchResults{overflow:auto;height:calc(100% - 30px);
}.amap_lib_placeSearch,
.amap-ui-poi-picker-sugg-container{border:none!important;
}.amap_lib_placeSearch .poibox{border-bottom:1px solid #e8e8e8;cursor:pointer;padding:3px 5px;position:relative;min-height:35px;
}.amap_lib_placeSearch_pic{width:30px;height:30px;float:left;margin:4px 10px 0 0;
}.amap_lib_placeSearch_pic img{width:30px;height:30px;
}.amap_lib_placeSearch .poibox.highlight{background-color:#CAE1FF;
}.amap_lib_placeSearch .poibox .poi-title{margin-left:25px;font-size:14px;font-weight:700;overflow:hidden;height:20px;line-height:20px;
}.poi-more{display:none!important;
}.btns .weui-btn{font-size:10px;
}.foot{display:flex;
}
</style>{/block}
{block name="main"}
{include file="/user/header"}<divclass="wrap">
<formclass="form">
<divclass="item">
<divclass="title">
<label>公司名称</label>
<inputtype="text"class="company"placeholder="请输入公司名称">
<inputtype="hidden"class="name">
<inputtype="hidden"class="address">
<inputtype="hidden"class="longitude">
<inputtype="hidden"class="latitude">
</div>
<divclass="row">
<selectname="s1">
<optionvalue="电话">电话</option>
<optionvalue="地址">地址</option>
<optionvalue="传真">传真</option>
<optionvalue="邮箱">邮箱</option>
</select>
<inputtype="text"name="value">
<spanclass="iconfont icon-guanbi"></span>
</div>
<divclass="btns">
<divclass="weui-btn weui-btn_mini weui-btn_primary dangqian">获取当前位置</div>
<divclass="weui-btn weui-btn_mini weui-btn_primary">地图选点</div>
<divclass="weui-btn weui-btn_mini weui-btn_primary addRow">新增一行</div>
<divclass="weui-btn weui-btn_mini weui-btn_warn deleteCompany">删除公司</div>
</div>
</div>
</form>
</div>
<divclass="foot" >
<divclass="weui-btn weui-btn_mini weui-btn_primary addCompany">新增公司</div>
<divclass="weui-btn weui-btn_mini weui-btn_primary save"style="margin-top:0px;">保存提交</div>
</div>
<divclass="outbox">
<divid="container"></div>
<divid="panel"class="scrollbar1">
<divid="searchBar">
<inputid="searchInput"placeholder="输入关键字搜素POI" />
</div>
<divid="searchResults"></div>
</div>
</div>{/block}
{block name="js"}<scripttype="text/javascript"src=‘//webapi.amap.com/maps?v=2.0&key=你的高德地图key‘></script>
<scriptsrc="http://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<scriptsrc="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
varhttpserver= "{$http.httpserver}"
varhttpport= "{$http.httpport}"
varformData=[]
wx.config({
debug:false,//开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId:‘{$arr.appid}‘,//必填,公众号的唯一标识
timestamp:‘{$arr.timestamp}‘,//必填,生成签名的时间戳
nonceStr:‘{$arr.noncestr}‘,//必填,生成签名的随机串
signature:‘{$arr.signature}‘,//必填,签名
jsApiList: [‘getLocation‘]//必填,需要使用的JS接口列表
});
$(function(){
let window=document.documentElement.clientHeight
$("#container").height(window/3*2)
$("#panel").height(window/3)
$("body").on(‘click‘,‘.addRow‘,function(){
let a=`<div>
<select name="s1[]">
<option value="电话">电话</option>
<option value="地址">地址</option>
<option value="传真">传真</option>
<option value="邮箱">邮箱</option>
</select>
<input type="text"name="value">
<span></span>
</div>`
$(this).parent(‘.btns‘).before(a)
})
$("body").on(‘click‘,‘.addCompany‘,function(){
let a=`<form>
<div>
<div>
<label>公司名称</label>
<input type="text"class="company"placeholder="请输入公司名称">
<input type="hidden"class="name">
<input type="hidden"class="address">
<input type="hidden"class="longitude">
<input type="hidden"class="latitude">
</div>
<div>
<select name="s1">
<option value="电话">电话</option>
<option value="地址">地址</option>
<option value="传真">传真</option>
<option value="邮箱">邮箱</option>
</select>
<input type="text"name="value">
<span></span>
</div>
<div>
<div>获取当前位置</div>
<div>地图选点</div>
<div>新增一行</div>
<div>删除公司</div>
</div>
</div>
</form>`
$(".wrap").append(a)
})
$("body").on(‘click‘,‘.icon-guanbi‘,function(){
$(this).parent(‘.row‘).remove()
})
$("body").on(‘click‘,‘.deleteCompany‘,function(){
$(this).parent(‘.btns‘).parent(‘.item‘).parent(‘form‘).remove()
})
$("body").on(‘click‘,‘.save‘,function(){
$(".form").each(function(i,v){
let a=$(‘.form‘).eq(i).serializeArray()
let b=[]for(let ii= 0; ii<a.length; ii++){//把动态生成的数据处理成键为jieshao的对象
if(Math.floor(ii/2) === (ii/2)){
b[ii/2] = {‘jieshao‘:a[ii].value+‘:‘+a[ii+1].value}
}
}//公司,名称,地址,经纬度添加到数组中
let company=$(".form").eq(i).find(‘.company‘).val()
let name=$(".form").eq(i).find(‘.name‘).val()
let address=$(".form").eq(i).find(‘.address‘).val()
let longitude=$(".form").eq(i).find(‘.longitude‘).val()
let latitude=$(".form").eq(i).find(‘.latitude‘).val()
b.push({company})
b.push({name})
b.push({address})
b.push({longitude})
b.push({latitude})
console.log(b)
})
})varmap= newAMap.Map(‘container‘, {
zoom:15});
$("body").on("click",".dangqian",function(){var_this=$(this)
$.showLoading(‘请稍后‘)
wx.getLocation({
type:‘gcj02‘,//默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入‘gcj02‘
success:function(res) {varlatitude=res.latitude;//纬度,浮点数,范围为90 ~ -90
varlongitude=res.longitude;//经度,浮点数,范围为180 ~ -180。
let lnglat=[longitude,latitude]
AMap.plugin([‘AMap.Geocoder‘,‘AMap.Autocomplete‘],function(){vargeocoder= newAMap.Geocoder({city:‘010‘})
geocoder.getAddress(lnglat,function(status, result) {if(status=== ‘complete‘ &&result.info=== ‘OK‘) {//result为对应的地理位置详细信息
let name=result.regeocode.formattedAddress
let address=result.regeocode.addressComponent.province+result.regeocode.addressComponent.city+result.regeocode.addressComponent.district+result.regeocode.addressComponent.street+result.regeocode.addressComponent.streetNumber
_this.parent(‘.btns‘).siblings(‘.title‘).find(‘.name‘).val(name)
_this.parent(‘.btns‘).siblings(‘.title‘).find(‘.address‘).val(address)
_this.parent(‘.btns‘).siblings(‘.title‘).find(‘.longitude‘).val(longitude)
_this.parent(‘.btns‘).siblings(‘.title‘).find(‘.latitude‘).val(latitude)
$.hideLoading()
}
})
})
}
});
})
AMapUI.loadUI([‘misc/PoiPicker‘],function(PoiPicker) {varpoiPicker= newPoiPicker({
input:‘searchInput‘,
placeSearchOptions: {
map: map,
pageSize:15},
searchResultsContainer:‘searchResults‘});
poiPicker.on(‘poiPicked‘,function(poiResult) {
poiPicker.hideSearchResults();varsource=poiResult.source,
poi=poiResult.item;if(source!== ‘search‘) {//suggest来源的,同样调用搜索
poiPicker.searchByKeyword(poi.name);
}else{
let name=poi.name,
address=poi.address,
lat=poi.location.lat,
lng=poi.location.lng
}
});
poiPicker.onCityReady(function() {
poiPicker.searchByKeyword(‘‘);
});
});
})functiongetRequest() {varurl=location.search;//获取url中"?"符后的字串
vartheRequest= newObject();if(url.indexOf("?")!= -1) {varstr=url.substr(1);
strs=str.split("&");for(vari= 0; i<strs.length; i++) {
theRequest[strs[i].split("=")[0]]=(decodeURI(strs[i].split("=")[1]));
}
}returntheRequest;
}</script>{/block}

 

微信web网页动态增减输入框,搜索框,基于jQuery weui、jQuery 实现无限插入数据,动态数据生成,外加高德地图POI和根据坐标获取位置信息的页面

原文地址:https://www.cnblogs.com/dayin1/p/13590527.html

Ubuntu 20.04超级用户(root)密码重置

上一篇

Xshell录制日志——记录屏幕输出内容至文本

下一篇

你也可能喜欢

微信web网页动态增减输入框,搜索框,基于jQuery weui、jQuery 实现无限插入数据,动态数据生成,外加高德地图POI和根据坐标获取位置信息的页面

长按储存图像,分享给朋友