标签: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