laravel input框定位地理位置
<div class="layui-form-item"> <label class="layui-form-label">地址</label> <div class="layui-input-block"> <input type="text" name="address" id="address" placeholder="请输入" autocomplete="off" onclick="map()" class="layui-input"> </div> </div>
<script type="text/javascript"> function map() { $.ajax({ type: "get",//接口规定,只能用get async: true,//异步 url: "https://apis.map.qq.com/ws/location/v1/ip",//接口地址 data: {"key": "腾讯地图的key", "output": "jsonp"},//参数格式必须用到output传参为jsonp,否则会报跨域问题 dataType: "jsonp",//跨域,必须用到jsonp success: function (result) { // console.log(result.message) ; // console.log(result.result.ad_info) ; // 进行追加至input $('#address').val(result.result.ad_info.nation+'/'+result.result.ad_info.province+'/'+result.result.ad_info.city) }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(JSON.stringify(XMLHttpRequest)); document.write(JSON.stringify(XMLHttpRequest)); } }); } </script>
获取腾讯地图的key
https://lbs.qq.com/dev/console/application/mine
效果图