layui+腾讯地图 简易版搜索功能的实现

腾讯地图 简易版搜索功能的实现"/>

layui+腾讯地图 简易版搜索功能的实现

首先看一下项目中的效果图

接下来的就是具体的实现步骤：

html部分

 <div class="layui-form-item"><label class="layui-form-label">所在地</label><div class="layui-input-block"><input type="text" id="demo1" class="layui-input" readonly="readonly" name="store_address_ids"></div></div><div class="layui-form-item" ><label class="layui-form-label ">经度</label><div class="layui-input-block"><input type="text" name="store_longitude" class="layui-input"   placeholder="请输入经度" value="" id="lon"   lay-filter="lon" ><tip>点击地图点选</tip></div></div><div class="layui-form-item"><label class="layui-form-label  ">纬度</label><div class="layui-input-block"><input type="text" name="store_latitude" class="layui-input"   placeholder="请输入经度" value=""  id="lat"   lay-filter="lat" ><!-- <tip>点击地图点选</tip> --></div></div>

 地图弹出层的部分，可以放在页面的任意位置

<div  id="tMap" class="layui-hide" style="padding: 10px;"><div  class="layui-form layuimini-form"><div class="layui-form-item"><div class="layui-input-inline"><input type="text" name="search_key" id="search_key" class="layui-input"  placeholder="请输入地名" ></div><button  class="layui-btn layui-btn-normal layui-btn-sm searchKey" >查询</button></div></div><div id="maplocation" style="width:780px;height:400px;"></div>
</div>
<style>body .layui-ext-yourskin  .layui-layer-btn0{border: 1px solid #dedede;background-color:#fff;color: #333;}body .layui-ext-yourskin  .layui-layer-btn1{background-color:#1E9FFF;border-color:#1E9FFF;color: #fff;}
</style>
<script charset="utf-8" src="=2.exp&key=O6YBZ-XFTH4-HHSUR-DV4AI-5T4D6-AQWEA&libraries=drawing,geometry,place,convertor,visualization"></script>

js重点部分，点击弹出地图和简单搜索的方法都在下面

    var layer = layui.layer;$=layui.jquery;$(document).on('click','#lon',function(){if(!$("#demo1").val()){layer.msg('请选择所在地', { icon: 5, anim: 6 });return false;}var  markers = [];$("#tMap").removeClass('layui-hide');layer.open({type:1,area:["800px","600px"],title:"地图标识",btn: ['取消','确定'],skin: 'layui-ext-yourskin',content:$('#tMap'),success:function(){let map = new qq.maps.Map(document.getElementById("maplocation"), {center: new qq.maps.LatLng(40.820004,111.718132),      // 地图的中心地理坐标。zoom:13,                                                 // 地图的中心地理坐标。});var latlngBounds = new qq.maps.LatLngBounds();searchService = new qq.maps.SearchService({complete:function(results){console.log(results)var pois = results.detail.pois;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) {console.log(111)var marker = new qq.maps.Marker({map: map});marker.setPosition(pois[n].latLng);marker.setTitle(i + 1);markers.push(marker);qq.maps.event.addListener(marker, 'click', function() {let latX = pois[n].latLng.getLat().toFixed(6);let lngY = pois[n].latLng.getLng().toFixed(6);$('#lon').val(latX);$('#lat').val(lngY);infoWin.open();infoWin.setContent('<div style="width:280px;height:100px;">' + '当前经纬度：' +pois[n].latLng + '，名称：' + pois[n].name + '，当前位置：' + pois[n].address +'</div>');infoWin.setPosition(pois[n].latLng);});})(i);}//调整地图视野map.fitBounds(latlngBounds);}});qq.maps.event.addListener(map, 'click', function(event) {var marker=new qq.maps.Marker({position:event.latLng,map:map,draggable: true,});var info = new qq.maps.InfoWindow({map: map});var point = event.latLng;let latX = point.getLat().toFixed(6);let lngY = point.getLng().toFixed(6);$('#lon').val(latX);$('#lat').val(lngY);qq.maps.event.addListener(map, 'click', function(event) {marker.setMap(null);});qq.maps.event.addListener(marker, 'dragging', function(event) {var latLng = event.latLng;let lat = latLng.getLat().toFixed(6);let lng = latLng.getLng().toFixed(6);$('#lon').val(lng);$('#lat').val(lat);});});} ,yes: function(index, layero){//do somethinglayer.close(index); //如果设定了yes回调，需进行手工关闭},cancel: function(index, layero){ //if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭document.getElementById("tMap").style.display="none";//通过设置display属性可以使div隐藏后释放占用的页面空间 layer.close(index)// }return false; }    //这里content是一个普通的String});
});$(document).on('click','.searchKey',function(){var search_key=$("#search_key").val();var city=$(".el-input__inner").val().replace(/\ +/g,"").replace(/\//g,'');searchService.setLocation(city);searchService.search(search_key);})

到此layui+腾讯地图简易版搜索及获取经纬度就实现了