静态页面
<div class="panel panel-default field-el"> <div class="panel-heading"> <input name="fieldType" value="10" hidden/> <input name="lonAndLat" value="" hidden/> 打卡 </div> <div class="panel-body"> <div class="form-group col-sm-12 "> <label class="col-sm-2 control-label">填写标题:</label> <div class="col-sm-4"> <input name="fieldTitle" class="form-control" type="text"> </div> <label class="col-sm-2 control-label">是否必填:</label> <div class="col-sm-2"> <select name="isRequired" class="form-control m-b"> <option value="0">非必填</option> <option value="1">必填</option> </select> </div> </div> <div class="form-group col-sm-12"> <label class="col-sm-2 control-label">填写项说明:</label> <div class="col-sm-8"> <textarea type="text" name="fieldDesc" class="form-control" placeholder="">获取地址</textarea> </div> </div> </div> <div class="hr-line-dashed"></div> <div class="panel-body"> <div class="form-group col-sm-12 "> <button type="button" id="sel_place" class="col-sm-offset-0 btn btn-w-m btn-success" @click="selectPlace()">请选择位置</button> <div id="map_div" style="height:100%;z-index: 1000;"> <iframe width="50%" height="100%" frameborder="0" src=""></iframe> </div> </div> </div> <div class="hr-line-dashed"></div> <div class="panel-body"> <div class="form-group col-sm-12 "> <label class="col-sm-2 control-label">地点:</label> <div class="col-sm-4"> <input name="poiAddress" class="form-control" type="text"> </div> <label class="col-sm-2 control-label">地点名称:</label> <div class="col-sm-4"> <input name="poiName" class="form-control" type="text"> </div> </div> <div class="form-group col-sm-12 "> <label class="col-sm-2 control-label">范围:</label> <div class="col-sm-4"> <input name="rangeBand" class="form-control" type="number" placeholder="范围单位为米"/> </div> </div> </div> </div>
js部分
var mapKey=[[${mapKey}]]; var mapReferer=[[${mapReferer}]]; function selectPlace(){ $('#map_div').show(); $('#sel_place').hide(); $('#map_div').css('height',window.screen.availHeight); if($("iframe").attr("src") == ''){ $("iframe").attr("src","https://apis.map.qq.com/tools/locpicker?search=1&type=1&key="+ mapKey + "&referer=" + mapReferer); } }; window.addEventListener('message', function(event) { // 接收位置信息,用户选择确认位置点后选点组件会触发该事件,回传用户的位置信息 var loc = event.data; if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息,需判断module是否为'locationPicker' $('input[name="lonAndLat"]').val(loc.latlng.lat + "|" + loc.latlng.lng); $('input[name="poiAddress"]').val(loc.poiaddress); $('input[name="poiName"]').val(loc.poiname); $('#map_div').hide(); $('#sel_place').show(); } }, false);