百度地圖商家標註，查詢附近3000米內的商家並標到地圖上
阿新 • • 發佈：2019-01-04
效果圖
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KEY"></script> <script type="text/javascript"> // 百度地圖API功能 map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.417854,39.921988), 15); //向地圖新增縮放控制元件 function addMapControl(){ var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); scaleControl.setUnit(BMAP_UNIT_IMPERIAL); map.addControl(scaleControl); var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(navControl); var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true}); map.addControl(overviewControl); } addMapControl(); //訪問時根據城市IP自動定位 function myFun(result){ var cityName = result.name; map.centerAndZoom(cityName,10); $("#curposition").text(cityName); } var myCity = new BMap.LocalCity(); myCity.get(myFun); // 點選省獲取城市下拉框並設定地圖地圖中心點為當前省份中心點 $("#provice").change(function(){ var provice_name = $(this).val().split('|'); map.centerAndZoom(provice_name[1],10); var url = "<?php echo SHOP_SITE_URL;?>/index.php?act=index&op=get_area&id="+provice_name[0]; $("#city").empty(); $("#city").append('<option value="">請選擇城市</option>'); $.getJSON(url,function(result){ $.each(result,function(n,e){ $("#city").append('<option value="'+e.area_id+'|'+e.area_name+'">'+e.area_name+'</option>'); }); }); }) // 點選城市獲取區域下拉框並設定地圖地圖中心點為當前城市中心點 $("#city").change(function(){ var city_name = $(this).val().split('|'); map.centerAndZoom(city_name[1],15); var url = "<?php echo SHOP_SITE_URL;?>/index.php?act=index&op=get_area&id="+city_name[0]; $("#area").empty(); $("#area").append('<option value="">請選擇區域</option>'); $.getJSON(url,function(result){ $.each(result,function(n,e){ $("#area").append('<option value="'+e.area_id+'|'+e.area_name+'">'+e.area_name+'</option>'); }); }); }) //根據區域設定地圖中心 $("#area").change(function(){ var city_name = $("#city").val().split('|')[1]; var area_name = $(this).val().split('|')[1]; areaSetMap(city_name,city_name+area_name,13); }) //單擊地區時呼叫此方法 function areaSetMap(city,address,grade){ var myGeo = new BMap.Geocoder(); var latlng; myGeo.getPoint(address, function(point){ if (point) { map.centerAndZoom(point,grade); }else{ alert("您選擇地址沒有解析到結果!"); } },city); } //單擊搜尋時呼叫此方法 function addressSetMap(city,address,grade){ var myGeo = new BMap.Geocoder(); var latlng; myGeo.getPoint(address, function(point){ if (point) { map.centerAndZoom(point,grade); var latlng = point.lng+','+point.lat; getStoreList(latlng); }else{ alert("您選擇地址沒有解析到結果!"); } },city); } //單擊搜尋 $("#map_search").click(function(){ var area=$("#area").val(); var key = $("#keywords").val(); var city_name = $("#city").val().split('|')[1]; var area_name = $("#area").val().split('|')[1]; if(area==""){ alert("請選擇地區");return; } if(key==""){ alert("請輸入搜尋詳細地址");return; } var address = city_name+area_name+key; addressSetMap(city_name,address,18); }) function point(){ //建立小狐狸 var pt = new BMap.Point(116.417, 39.909); var myIcon = new BMap.Icon("<?php echo SHOP_TEMPLATES_URL;?>/images/point.png", new BMap.Size(300,157)); var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 建立標註 map.addOverlay(marker2); // 將標註新增到地圖中 } //搜尋獲取店鋪列表 function getStoreList(latlng){ $(".maploading").show(); var i=0; //設定圖示位置 var opts = {width : 250,height: 80,enableMessage:true}; var url = "<?php echo SHOP_SITE_URL;?>/index.php?act=index&op=getStore_list&latlng="+latlng; $.getJSON(url,function(result){ $.each(result,function(n,e){ if(n>0){ i = -n*27; } map.removeOverlay(); //清空地圖示 var pt = new BMap.Point(e.store_lat,e.store_lng); var myIcon = new BMap.Icon("<?php echo SHOP_TEMPLATES_URL;?>/images/point.png", new BMap.Size(27,38),{ anchor: new BMap.Size(13,0), imageOffset: new BMap.Size(i,0) // 設定圖片偏移 }); var marker = new BMap.Marker(pt,{icon:myIcon}); // 建立標註 map.addOverlay(marker); //建立資訊視窗 var html="<dl class=mapstorelist><dt><a href='"+e.url+"' target=_blank><img src='"+e.img+"' width=120 height=100></a><dt>"; html+="<dd><b>"+e.store_name+"</b><p>"+e.area_info+"</p><p>"+e.store_address+"</p><a href='"+e.url+"' class=enterstore target=_blank>進入店鋪</a></dd></dl>"; var infoWindow = new BMap.InfoWindow(html); marker.addEventListener("click", function () { map.centerAndZoom(e.lat+','+e.lng,18); this.openInfoWindow(infoWindow); }); }); $(".maploading").hide(); }); } </script>這是JS ，其它部分原始碼需要的朋友可聯絡
<div class="bai_Map"> <h2>您現在的位置<span id="curposition"></span></h2> <div id="allmap" style="width:1198px; height:560px; border:1px solid #03ada4;"></div> <div class="map_search"> <form action=""> <select name="" id="provice"> <option value="">請選擇省份</option> </select> <select name="" id="city"> <option value="">請選擇城市</option> </select> <select name="" id="area"> <option value="">請選擇地區</option> </select> <input type="text" id="keywords" class="map_text" placeholder="請輸入搜尋的詳細地址" /> <input type="button" class="map_btn" id="map_search" value="搜 索" /> </form> </div> <div class="maploading"> <div class="spinner"> <div class="dot1"></div> <div class="dot2"></div> </div> </div> </div>
CSS/* CSS Document */ .bai_Map { width: 1200px; height: 600px; margin: 0 auto; margin-top: 15px; overflow: hidden; position: relative; } .bai_Map h2 { height: 35px; text-align: center; color: #FFF; font-size: 18px; font-weight: normal; line-height: 35px; background: #03ada4; } .map_search { position: absolute; left: 100px; top: 50px; z-index: 1000; } .map_search input { border: 1px solid #dfdfdf; padding: 6px 10px; float: left; font-size: 14px; color: #666; font-family: 'Microsoft Yahei'; box-shadow: #dfdfdf 0 0 4px; } .map_search select { height: 35px; min-width: 140px; float: left; margin-right: 5px; font-size: 14px; border: 1px solid #dfdfdf; color: #666; box-shadow: #dfdfdf 0 0 4px; font-family: 'Microsoft Yahei' } .map_search .map_text { padding: 3px 10px; border: 1px solid #dfdfdf; height: 27px; width: 250px; } .map_search .map_btn { background: url(../images/mapsbtn.png) no-repeat; color: #FFF; border: 0px; font-size: 16px; border-radius: 3px; width: 70px; height: 35px; margin-left: 5px; cursor: pointer; } .mapstorelist { border-radius: 5px; } .mapstorelist dt { float: left; margin-right: 10px; } .enterstore { padding: 5px 10px; background: url(../images/mapsbtn.png) no-repeat; color: #FFF; font-size: 14px; display: inline-block; margin-top: 10px; } .enterstore:hover { color: #FFF; } .maploading { display:none; width: 100%; height: 100%; background:url(../images/tm25.png); position: absolute; left: 0px; top:35px; } .maploading .spinner { margin: 250px auto; width: 90px; height: 90px; position: relative; text-align: center; -webkit-animation: rotate 2.0s infinite linear; animation: rotate 2.0s infinite linear; } .maploading .dot1, .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #e71e80; border-radius: 100%; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .maploading .dot2 { top: auto; bottom: 0px; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) } } @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) } } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } }