效果图
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIyVGduV2QvwVe0lmdhJ3ZvwFM38CXlZHbvN3cpR2Lc1TPB10QGtWUCpEMJ9CXsxWam9CXwADNvwVZ6l2c052bm9CXUJDT1wkNhVzLcRnbvZ2LcZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39zNygzNxIDNwEDNygDM1EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
<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);
}
}