百度地图商家标注，查询附近3000米内的商家并标到地图上

效果图

<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);
}
}

百度地图商家标注，查询附近3000米内的商家并标到地图上相关推荐

php 高德地图创建标注,自定义图标-点标记-示例中心-JS API 示例 | 高德地图API
图标点标记 html,body,#container{ height:100%; width:100%; } .amap-icon img{ width: 25px; height: 34px; } ...
ElasticSearch查询学习笔记章节5——geo_distance，geo_bounding_box，geo_polygon地图检索geo查询
ElasticSearch查询笔记目录涉及的常用查询内容较多,将分多个章节进行笔记整理,具体如下: ElasticSearch查询学习笔记章节1--term,terms,match,id查询 ...
网站调用百度地图根据地址查询经纬度
百度地图API简单应用-根据地址查询经纬度简单几步注册获得一个ak,就能直接调用(PS:好像1.3版本前的无需注册获取ak,就能直接调用api). 闲话不多,下面就直接给大家介绍下,具体要怎么调用百 ...
基于JDBC从数据库中读取数据，在百度地图批量标注地点
基于JDBC从数据库中读取数据,在百度地图批量标注地点一.相关技术 JSP,JDBC,JSON,JS,百度地图API 二.基于JDBC从数据库读取数据见"JSP基于JDBC操作MSSQL ...
百度地图驾车/公交查询Demo（支持多起点多终点）
2019独角兽企业重金招聘Python工程师标准>>> 效果图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
java百度地图添加标注_调取百度地图接口，实现取自己的实时位置，然后可以在百度地图上添加信息标注...
前几天接了一个小项目,就是有关百度地图的,和我的上一篇不一样,上一篇是复制人家的源代码是把东西写死了的,这次的比较有难度,要调取他的接口,用js来实现. 下面我先说一下主要实现的功能,和要实现的页面 ...
百度地图多标注显示以及自定义图标
** 百度地图多标注显示以及自定义图标 ** 效果图: HTML部分 <style>*{margin:0px;padding:0px} html{font-size: 100%;} bod ...
百度地图自定义标注点
百度地图自定义标注点 //创建点 var point = new BMap.Point(109.49926175379778, 36.60449676862417); //创建自定义标 //参数1:自 ...
vue + 百度地图 +点位标注
在项目中插入百度地图,并标注符合条件的企业点位 1.template: <template><div class="map bottom- ...

百度地图商家标注，查询附近3000米内的商家并标到地图上

百度地图商家标注，查询附近3000米内的商家并标到地图上相关推荐

最新文章

热门文章