腾讯地图获取经纬度


静态页面

<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);

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM