码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2020-09-12 21:31:17      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:amp   api   status   att   ppi   text   win   模板   ide   

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

本页内容主要是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}

 

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

标签:amp   api   status   att   ppi   text   win   模板   ide   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!