微信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" title="联系方式"}
<div class="wrap">
    <form class="form">
        <div class="item">
            <div class="title">
                <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 class="row">
                <select name="s1">
                    <option value="电话">电话</option>
                    <option value="地址">地址</option>
                    <option value="传真">传真</option>
                    <option value="邮箱">邮箱</option>
                </select>
                <input type="text" name="value">
                <span class="iconfont icon-guanbi"></span>
            </div>
            <div class="btns">
                <div class="weui-btn weui-btn_mini weui-btn_primary dangqian">获取当前位置</div>
                <div class="weui-btn weui-btn_mini weui-btn_primary">地图选点</div>
                <div class="weui-btn weui-btn_mini weui-btn_primary addRow">新增一行</div>
                <div class="weui-btn weui-btn_mini weui-btn_warn deleteCompany">删除公司</div>
            </div>
        </div>
    </form>
</div>
<div class="foot" >
    <div class="weui-btn weui-btn_mini weui-btn_primary addCompany">新增公司</div>
    <div class="weui-btn weui-btn_mini weui-btn_primary save" style="margin-top:0px;">保存提交</div>
</div>
<div class="outbox">
    <div id="container"></div>
    <div id="panel" class="scrollbar1">
        <div id="searchBar">
            <input id="searchInput" placeholder="输入关键字搜素POI" />
        </div>
        <div id="searchResults"></div>
    </div>
</div>

{/block}
{block name="js"}
<script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=你的高德地图key'></script>
<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
    var httpserver = "{$http.httpserver}"
    var httpport = "{$http.httpport}"
    var formData = []
    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 class="row">
            <select name="s1[]">
                <option value="电话">电话</option>
                <option value="地址">地址</option>
                <option value="传真">传真</option>
                <option value="邮箱">邮箱</option>
            </select>
            <input type="text" name="value">
            <span class="iconfont icon-guanbi"></span>
        </div>`
            $(this).parent('.btns').before(a)
        })
        $("body").on('click','.addCompany',function(){
            let a = `<form class="form">
        <div class="item">
            <div class="title">
                <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 class="row">
                <select name="s1">
                    <option value="电话">电话</option>
                    <option value="地址">地址</option>
                    <option value="传真">传真</option>
                    <option value="邮箱">邮箱</option>
                </select>
                <input type="text" name="value">
                <span class="iconfont icon-guanbi"></span>
            </div>
            <div class="btns">
                <div class="weui-btn weui-btn_mini weui-btn_primary dangqian">获取当前位置</div>
                <div class="weui-btn weui-btn_mini weui-btn_primary">地图选点</div>
                <div class="weui-btn weui-btn_mini weui-btn_primary addRow">新增一行</div>
                <div class="weui-btn weui-btn_mini weui-btn_warn deleteCompany">删除公司</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)
            })
        })
        var map = new AMap.Map('container', {
            zoom:15
        });
        $("body").on("click",".dangqian",function(){
            var _this = $(this)
            $.showLoading('请稍后')
            wx.getLocation({
                type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    let lnglat = [longitude,latitude]
                    AMap.plugin(['AMap.Geocoder','AMap.Autocomplete'],function(){
                        var geocoder = new AMap.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) {
            var poiPicker = new PoiPicker({
                input: 'searchInput',
                placeSearchOptions: {
                    map: map,
                    pageSize: 15
                },
                searchResultsContainer: 'searchResults'
            });
            poiPicker.on('poiPicked', function(poiResult) {
                poiPicker.hideSearchResults();
                var source = 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('');
            });
        });
    })


    function getRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for(var i = 0; i < strs.length; i ++) {
                theRequest[strs[i].split("=")[0]]=(decodeURI(strs[i].split("=")[1]));
            }
        }
        return theRequest;
    }
</script>
{/block}