高德地图js实现全国和某区域地图相互切换效果

时间：2023-03-27 13:55:33 JavaScript

高德地图js实现全国地图和某区域地图切换效果，layui，主要使用左上角layui弹窗组件选中的组件。当然你也可以使用原生或者其他组件。当radio选择发生变化时，更新地图参数也是一样的。重新渲染地图，默认银川地区。比如右上角的开关变化时，会切换到国家地图。css样式和html部分html,body,#container{width:100%;高度：100%；}.amap-icon>img{宽度：19px；高度：31px；}.switch{z-index:999;位置：绝对；右：10px；顶部：0；}

找了半天，高德地图没有自己的选点API。可以使用AMap.Marker实现点击自由点的功能，可以自定义坐标点的图片，然后调用affrimFormat方法就可以得到对应的坐标。切换选项时，将创建两个不同的地图实例。WhentheYinchuanoptionisselectedRecreateamapinstanceunderacertainarea(configurethroughthedistrictMapmethod:areaposition,areaborderstyle...)layui.use("form",function(){varform=layui.form;form.on("switch(switchTest)",function(data){if(this.checked){$("#autoText").show();$("#autoText_all").hide();map=districtMap();}else{//全国$("#autoText_all").show();$("#autoText").hide();map=newAMap.Map("container",{resizeEnable:true,});map.on("click",showInfoClick);}});});//选中位置的坐标varcoordinate=[];//点标记容器varmarker="";//搜索服务varplaceSearch;vardetailAddressList={};//初始化地图对象并加载地图函数districtMap(){varopts={subdistrict:1,extensions:"all",level:"city",};varmap=newAMap.Map("容器",{resizeEnable:true,center:[106.227885,38.486581],//默认定位银川zoom:11,});vardistrict=newAMap.DistrictSearch(opts);district.search("银川",function(status,result){varouter=[newAMap.LngLat(-360,90,true),newAMap.LngLat(-360,-90,true),newAMap.LngLat(360,-90,true),newAMap.LngLat(360,90,true),];varholes=result.districtList[0].boundaries;varpathArray=[外];pathArray.push.apply(pathArray,holes);varpolygon=newAMap.Polygon({//多边形填充颜色，使用十六进制颜色代码赋值，如：#FFAA00fillColor:"#fcf9f2",//多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明默认0.9fillOpacity:1,//轮廓样式，实线：solid，虚线：dashedstrokeStyle:"solid",});多边形.setPath(pathArray);地图.add（多边形）；});map.on（“点击”，showInfoClick）；返回地图；}//搜索框——输入提示插件varauto=newAMap.Autocomplete({input:"autoText",city:"银川市",citylimit:true,});AMap.event.addListener(auto,"select",select);varauto_all=newAMap.Autocomplete({input:"autoText_all",});AMap.event.addListener(auto_all,"select",select);地图=地区地图（）；functionselect(e){if(e.poi&&e.poi.location){//获取详细地址并实例化当前标记点getPositionByLonLats(e.poi.location.lng,e.poi.location.lat);添加标记（e.poi.location.lng，e.poi.location.lat）；地图.setZoom(13);map.setCenter(e.poi.location);}}//实例化点标记函数addMarker(lng,lat){map.remove(marker);marker=newAMap.Marker({icon:"mark_r.png",position:newAMap.LngLat(lng,lat),title:"",});marker.setMap(地图);}functionshowInfoClick(e){console.log(e);document.getElementById("autoText").value="";清除标记（）；getPositionByLonLats(e.lnglat.getLng(),e.lnglat.getLat());addMarker(e.lnglat.getLng(),e.lnglat.getLat());坐标=[e.lnglat.getLng(),e.lnglat.getLat()];控制台日志（坐标）；}//清除标记函数clearMarker(){if(!placeSearch){return;}if(placeSearch){placeSearch.render&&placeSearch.render.markerList.clear();}else{placeSearch.clear();}map.remove(标记);}//根据经纬度获得详细地址functiongetPositionByLonLats(lng,lat){varlnglatXY=[lng,lat];//地图上标点的坐标AMap.service("AMap.Geocoder",function(){//回调函数geocoder=newAMap.Geocoder({});geocoder.getAddress(lnglatXY,function(status,result){if(status==="complete"&&result.info==="OK"){varaddress=result.regeocode.formattedAddress;Label({marker.setcontent:"地址:"+address+"",//设置文本标签内容方向:"top",//设置文本标签方向});clickAddr=address;marker.setIcon("../../images/mark_r.png");searchNearBy("",lnglatXY,10000);}else{}});});}//根据经纬度获取一定范围内的详细地址functionsearchNearBy(keyword,LngLat,radius){AMap.service(["AMap.PlaceSearch"],function(){//构造地点查询类placeSearch=newAMap.PlaceSearch({pageSize:5,//单页显示的结果数pageIndex:1,//页码type:"",//POI类别extensions:"all",fillColor:"0",map:地图,//显示resultsMapinstancepanel:"testAddreInfo",//结果列表将显示在这个容器中autoFitView:true,//是否自动调整地图的视图，使绘制的Marker点都在视口可见范围内});//关键词查询});placeSearch.searchNearBy(keyword,LngLat,radius,function(status,result){console.log(status,result);detailAddressList={};if(result.info=="OK"){result.poiList.pois.forEach(function(val){detailAddressList[val.address]=val.pname+val.cityname+val.adname+val.name;coordinate=[val.location.lng,val.location.lat];});}});placeSearch.on("selectChanged",function(e){clickAddr="";map.remove(marker);});}functionaffrimFormat(){varval="";if(document.querySelector("#testAddreInfo.amap_lib_placeSearch_ul")){if(document.querySelector("#testAddreInfo.amap_lib_placeSearch_ul.poibox.selected.poi-info.poi-addr")==null&&clickAddr!=""){returnclickAddr;}val=document.querySelector("#testAddreInfo.amap_lib_placeSearch_ul-poibox.seinfo.poi-addr").innerText.replace("地址:","");varname=document.querySelector("#testAddreInfo.amap_lib_placeSearch_ul.poibox.selected.poi-title.poi-name").innerText;val=detailAddressList[val]+val+name;}else{val=document.querySelector("#testAddreInfo").innerText;}returnval;}//点击事件绑定函数search(val){AMap.service(["AMap.PlaceSearch"],function(){//构造一个地点查询classplaceSearch=newAMap.PlaceSearch({pageSize:5,//单页显示结果数pageIndex:1,//页码扩展ons:"all",map:map,//显示结果的地图实例panel:"testAddreInfo",//结果列表会显示在这个容器中autoFitView:true,//是否自动调整地图视图到使绘制的Marker点都在视口可见范围内});//关键字查询placeSearch.search(val,function(status,result){console.log(status,result);detailAddressList={};if(result.info=="OK"){result.poiList.pois.forEach(function(val){detailAddressList[val.address]=val.pname+val.cityname+val.adname;coordinate=[val.location.lng,val.location.lat];});}});});}

上一篇：前端面试每日3+1——第916天

下一篇：Vue异步组件实现原理

高德地图js实现全国和某区域地图相互切换效果相关文章