腾讯地图位置
2
html
<style type="text/css">.ismap .maps {height: 380px;width: 550px;overflow: hidden;border: 1px solid #E4E4E4;}
</style><div class="form-group"><label class="col-xs-12 col-sm-3 col-md-2 control-label">公司地址</label><div class="col-sm-4"><input type="text" name="address" value="{$item['address']}" placeholder="输入详细地址，如：杏林湾营运中心9号楼"autocomplete="off" id="address" class="form-control"><a href="javascript:;" class="layui-btn layui-btn-normal floatleft btn btn-success" id="selectshop"onClick="codeAddress();">定位</a><div class="ismap"><div class="maps" id="dituContent"></div><br/><p class="red">输入完整地址后，点击定位获得商户的经纬度（如定位不准，可手动拖动定位）</p><br/><p>当前经纬度：<input class="hrefto jing layui-input" readonly="readonly" style="display: inline-block;"type="text" name="lng" value="{$item['lng']}"/><input class="hrefto wei layui-input" readonly="readonly" type="text"style="display: inline-block;" name="lat" value="{$item['lat']}"/></p></div></div></div>
js
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=place&key={$map_key}"></script>
<script type="text/javascript">$(function(){$("#frame-5").show();$("#yframe-5").addClass("wyactive");})
</script>
<script>var namestr = "{$item['address']}"var lng = "{$item['lng']}";var lat = "{$item['lat']}";$(function(){if (namestr != null && namestr != '') {var center = new qq.maps.LatLng(lat, lng);var map = new qq.maps.Map(document.getElementById('dituContent'), {center: center,zoom: 13});var marker = new qq.maps.Marker({position: center,draggable: true,map: map});geocoder = new qq.maps.Geocoder({complete: function (result) {// $('input[name=address]').val(result.detail.address);map.setCenter(result.detail.location);marker.setPosition(result.detail.location);var weizhi1 = marker.getPosition();$('input[name=lat]').val(weizhi1.lat);$('input[name=lng]').val(weizhi1.lng);}});var ap = new qq.maps.place.Autocomplete(document.getElementById('address'));//调用Poi检索类。用于进行本地检索、周边检索等服务。var searchService = new qq.maps.SearchService({map: map});//添加监听事件qq.maps.event.addListener(ap, "confirm", function (res) {geocoder.getLocation(res.value);//若服务请求失败，则运行以下函数geocoder.setError(function () {alert("出错了，请输入正确的地址！！！");});});qq.maps.event.addListener(marker, 'dragend', function (event) {var latLng = event.latLng,lat = latLng.getLat(),lng = latLng.getLng();// var coord = new qq.maps.LatLng(lat,lng);// geocoder.getAddress(coord);$('input[name=lat]').val(lat);$('input[name=lng]').val(lng);});} else {// console.log(5);// $(".ismap").show();// var center = new qq.maps.LatLng(39.916527,116.397128);// map = new qq.maps.Map(document.getElementById('dituContent'),{// center: center,// zoom: 13// });// //获取城市列表接口设置中心点// citylocation = new qq.maps.CityService({// complete : function(result){// map.setCenter(result.detail.latLng);// if (marker != null) {// marker.setMap(null);// }// //设置marker标记// marker = new qq.maps.Marker({// map: map,// position: results.detail.latLng// });// }// });var marker = new qq.maps.Marker({position: center,map: map});// //调用searchLocalCity();方法 根据用户IP查询城市信息。// citylocation.searchLocalCity();}})//清除地图上的marker// function clearOverlays(overlays) {// var overlay;// while(overlay = overlays.pop()) {// overlay.setMap(null);// }// }function codeAddress() {var address = document.getElementById("address").value;//通过getLocation();方法获取位置信息值if (namestr != null && namestr != '') {geocoder.getLocation(address);} else {var center = new qq.maps.LatLng(39.916527, 116.397128);var map = new qq.maps.Map(document.getElementById('dituContent'), {center: center,zoom: 13});function replaceLikeVal(comp) {if (comp.value.indexOf("'") != -1 || comp.value.indexOf("\"") != -1) {//comp.value = comp.value.substring(0, comp.value.length-1);comp.value = comp.value.replace(/\'/g, "").replace(/\"/g, "");}};var searchService, markers = [];//设置Poi检索服务，用于本地检索、周边检索searchService = new qq.maps.SearchService({//检索成功的回调函数complete: function (results) {//设置回调函数参数var pois = results.detail.pois;if (!pois) {// alert('请输入详细的地址(xxx市xxx县xxx镇xxx)');alert("请输入详细的地址");}var infoWin = new qq.maps.InfoWindow({map: map});var latlngBounds = new qq.maps.LatLngBounds();for (var i = 0, l = pois.length; i < l; i++) {var poi = pois[i];//扩展边界范围，用来包含搜索到的Poi点latlngBounds.extend(poi.latLng);(function (n) {var marker = new qq.maps.Marker({position: center,draggable: true,map: map});marker.setPosition(pois[n].latLng);marker.setTitle(i + 1);markers.push(marker);$('.wei').val(pois[n].latLng.lat);$('.jing').val(pois[n].latLng.lng);qq.maps.event.addListener(marker, 'dragend', function (event) {var latLng = event.latLng,lat = latLng.getLat(),lng = latLng.getLng();// var coord = new qq.maps.LatLng(lat,lng);// geocoder.getAddress(coord);$('.jing').val(lng);$('.wei').val(lat);});})(i);}//调整地图视野map.fitBounds(latlngBounds);},//若服务请求失败，则运行以下函数error: function () {alert('请输入有效地址')}});$(".map").show();var keyword = document.getElementById("address").value;console.log(keyword);var region = '';var pageIndex = 0;var pageCapacity = 1;// clearOverlays(markers);//根据输入的城市设置搜索范围searchService.setLocation(region);//设置搜索页码searchService.setPageIndex(pageIndex);//设置每页的结果数searchService.setPageCapacity(pageCapacity);//根据输入的关键字在搜索范围内检索searchService.search(keyword);//根据输入的关键字在圆形范围内检索//var region = new qq.maps.LatLng(39.916527,116.397128);//searchService.searchNearBy(keyword, region , 2000);//根据输入的关键字在矩形范围内检索//region = new qq.maps.LatLngBounds(new qq.maps.LatLng(39.936273,116.440043),new qq.maps.LatLng(39.896775,116.354212));//searchService.searchInBounds(keyword, region);}}
</script>