百度地图国家城市二级联动服务网点查询
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>百度地图</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <style> .ipt { border: 1px solid #ddd; box-shadow: 0 0 3px rgba(0, 0, 0, 0.17) inset; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; border-radius: 0 !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; height: 34px; padding: 0px 5px; line-height: 30px\9; } * { box-sizing: border-box; } .map { width: 500px; height: 300px; border: 1px solid #999; margin-left: 100px; margin-top: 10px; } /*备注：去掉百度copyright*/ #map_container.map .BMap_cpyCtrl.BMap_noprint.anchorBL { display: none; } #btn { width: 100px; height: 50px; cursor: pointer; } </style> </head> <body> <div class="w1150"> <div class="video-wrapper"> <select id="province" name="province" class="ipt areaLists" style="width:150px;"></select> <select id="city" name="city" class="ipt areaLists" style="width:150px;"></select> <input type="button" id="btn" value="搜索" /> <div class="location-main"> <div class="fl location-shop-con"> <div class="location-shop-detail"> <ul class="location-list js-store" id="store-list" style="height:450px;overflow: scroll"> </ul> <div class="xm-controls xm-controls-small js-pager-controls" page="1" style="float: left;"> </div> </div> </div> <div class="location-map"> <div id="container" style="width: 100%; height: 100%; overflow: hidden; position: relative; z-index: 0; background-color: rgb(243, 241, 236); color: rgb(0, 0, 0); text-align:left;"> </div> </div> </div> </div> </div> <ul> <li> <span>国家/省</span> <div class="liSpan"></div> </li> </ul> <ul id="initData"> </ul> </body> </html> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="js/area.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script> <script> var map = new BMap.Map("container"); // 创建地图实例 // 初始化地图，设置中心点坐标和地图级别 var point = new BMap.Point(116.331398, 39.897445); // map.centerAndZoom(point, 15); map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.MapTypeControl()); //地址解析类 var gc = new BMap.Geocoder(); //显示地址信息窗口 function showLocationInfo(pt, rs) { var addComp = rs.addressComponents; $("#longitude").val(pt.lng); $("#latitude").val(pt.lat); console.log(\'经纬度：\' + pt.lng + \' \' + pt.lat); } $(function() { var provinceName = $(this).val(); getNowPos(); getLocal("province=" + provinceName); }); //搜索框按键查询 $(document).keyup(function(e) { //捕获文档对象的按键弹起事件 if(e.keyCode == 13) { //按键信息对象以参数的形式传递进来了 //此处编写用户敲回车后的代码 $("span.search-icon").click(); } }); function getNowPos() { var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r) { if(this.getStatus() == BMAP_STATUS_SUCCESS) { var marker = new BMap.Marker(r.point); map.addOverlay(marker); //标出所在地 map.panTo(r.point); //地图中心移动 var point = new BMap.Point(r.point.lng, r.point.lat); //用所定位的经纬度查找所在地省市街道等信息 var gc = new BMap.Geocoder(); gc.getLocation(point, function(rs) { var addComp = rs.addressComponents; $("#province,#city,#county").html("【" + addComp[\'province\'] + "】"); console.log("【" + addComp[\'province\'] + "】") $("#province option[value=\'" + addComp[\'province\'] + "\']").attr("selected", true); getLocal("province=" + addComp[\'province\']); }); } else { // alert("信息错误") } }, { enableHighAccuracy: true }) } var marker; function deletePoint() { var allOverlay = map.getOverlays(); for(var i = 0; i < allOverlay.length; i++) { map.removeOverlay(allOverlay[i]); } } function getLocal(urlData) { //Ajax.call(\'/Marketing2.php?act=getlocal\',urlData,returnToCartResponse,\'POST\', \'TEXT\', true, true); // function returnToCartResponse(result){ result = [{ "id": "522", "province": "美国", "areaLists": "", "shopname": "11111111111（上海）有限公司", "shopaddr": "上海市嘉定区曹安公路", "name": "张老师1", "dianhua": "123465464", "location": "-77.036871,38.907192" }, { "id": "516", "province": "中国", "areaLists": "上海市", "shopname": "22222222222（上海）有限公司", "shopaddr": "上海市嘉定区曹安公路", "name": "张老师2", "dianhua": "123465464", "location": "121.223968,31.281952" }, { "id": "516", "province": "中国", "areaLists": "湖北省", "shopname": "3333333333（上海）有限公司", "shopaddr": "上海市嘉定区曹安公路", "name": "张老师3", "dianhua": "123465464", "location": "114.27613872848,30.587851596764" }, { "id": "517", "province": "中国", "areaLists": "湖北省", "shopname": "444444444444（上海）有限公司", "shopaddr": "上海市嘉定区曹安公路", "name": "张老师4", "dianhua": "123465464", "location": "114.40624298256,30.510448272271" }, { "id": "518", "province": "", "areaLists": "", "shopname": "555555555（上海）有限公司", "shopaddr": "上海市嘉定区曹安公路", "name": "张老师", "dianhua": "123465464", "location": "112.14366834884,32.058976142962" }, { "id": "519", "province": "", "areaLists": "", "shopname": "6666666666（上海）有限公司", "shopaddr": "上海市嘉定区曹安公路", "name": "张老师", "dianhua": "123465464", "location": "110.7906542215,32.661244015944" }, { "id": "520", "province": "", "areaLists": "", "shopname": "77777777777777（上海）有限公司", "shopaddr": "上海市嘉定区曹安公路", "name": "张老师", "dianhua": "123465464", "location": "109.4926968993,30.278629959823" }, { "id": "521", "province": "中国", "areaLists": "湖南省", "shopname": "88888888888（上海）有限公司", "shopaddr": "上海市嘉定区曹安公路", "name": "张老师8", "dianhua": "123465464", "location": "112.26757444672,30.312061976048" } ]; reg = eval(result); console.log(reg) if(reg.length < 1) { $("#store-list").children().remove(); return false; } var storeList = ""; $("#store-num").html(reg.length); map.clearOverlays(); var pointsView = []; for(var i = 0; i < reg.length; i++) { var n = i + 1; var p = reg[i][\'location\'].split(\',\'); var point = new BMap.Point(p[0], p[1]); pointsView.push(point); var content = "<p style=\'font-weight:600\'>" + reg[i].shopname + "</p><p style=\'line-height: 20px;\'>地址：" + reg[i].shopaddr + "</p><p style=\'line-height: 20px;\'>联系人：" + reg[i].name + "</p><p style=\'line-height: 20px;\'>联系电话：" + reg[i].dianhua + "</p>"; var myIcon = new BMap.Icon("bd1.png", new BMap.Size(21, 33), { offset: new BMap.Size(10, 25), // 指定定位位置 }); var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注 var label = new BMap.Label(n, { offset: new BMap.Size(0, 3) }); label.setStyle({ width: \'21px\', background: \'none\', color: \'#fff\', border: \'none\', textAlign: \'center\' //只要对label样式进行设置就可达到在标注图标上显示数字的效果 }); marker.setLabel(label); //显示地理名称 a map.addOverlay(marker); addClickHandler(content, marker); storeList += \'<li onclick="to(this,\' + i + \',\' + p[0] + \',\' + p[1] + \',\\'\' + reg[i].shopname + \'\\',\\'\' + reg[i].shopaddr + \'\\',\\'\' + reg[i].name + \'\\')"><span class="location-num">\' + n + \'</span><div class="location-addr">\' + \'<h3>\' + reg[i].shopname + \'</h3> <p class="addr-info">\' + reg[i].shopaddr + \'</p></div>\' + \'</li>\'; } //让所有点在视野范围内 map.setViewport(pointsView); $("#store-list").children().remove(); $("#store-list").append(storeList); // } } var opts = { width: 250, // 信息窗口宽度 height: 50, // 信息窗口高度 title: "<p style=\'color: red;\'></p>", // 信息窗口标题 enableMessage: true //设置允许信息窗发送短息 }; //点击将信息内容加入白标注中 function addClickHandler(content, marker) { marker.addEventListener("click", function(e) { marker.setAnimation(null); openInfo(content, e); }); } function openInfo(content, e) { var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, point); //开启信息窗口 } //移动到某一坐标点 function to(obj, i, x, y, shopname, shopaddr) { var allOverlay = map.getOverlays(); var last = allOverlay.length - 1; map.removeOverlay(allOverlay[last]); $(obj).addClass("addMove"); $(obj).siblings().removeClass("addMove"); var point = new BMap.Point(x, y); map.centerAndZoom(point, 15); var myIcon = new BMap.Icon("bd2.png", new BMap.Size(21, 33), { offset: new BMap.Size(10, 25), // 指定定位位置 }); var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注 var n = i + 1; var label = new BMap.Label(n, { offset: new BMap.Size(0, 3) }); label.setStyle({ width: \'21px\', background: \'none\', color: \'#fff\', border: \'none\', textAlign: \'center\' //只要对label样式进行设置就可达到在标注图标上显示数字的效果 }); marker.setLabel(label); //显示地理名称 a map.addOverlay(marker); var content = "<p style=\'font-weight:600\'>" + shopname + "</p><p style=\'line-height: 20px;\'>地址：" + shopaddr + "</p><p style=\'line-height: 20px;\'>联系人：" + name + "</p>"; addClickHandler(content, marker); } var _area = { //keyword:\'\', _areaLists: $(".areaLists"), _address: $("#address"), unChecked: function(val) { return(val == \'\' || typeof(val) == \'undefined\' || val == null || val == \'国家\' || val == \'地级市\') ? false : true; }, list: function() { var _joinArea = \'\'; for(var i = 0; i < this._areaLists.length; i++) { if(_area.unChecked(this._areaLists[i].value)) { _joinArea += this._areaLists[i].value; } } if(_area.unChecked(this._address.val())) { _joinArea += \' \' + this._address.val(); _joinArea = this._address.val(); console.log(\'here\'); } //console.log(_joinArea); return _joinArea; }, init: function() { //绑定百度地图 var _this = _area.list(); $(\'.liSpan\').html(_area.list()) console.log(\'_this=\' + _this); //定义local var local = new BMap.LocalSearch(map, { renderOptions: { map: map, autoViewport: true } }); local.setSearchCompleteCallback(function(searchResult) { var poi = searchResult.getPoi(0); // document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat; map.centerAndZoom(poi.point, 11); gc.getLocation(poi.point, function(rs) { showLocationInfo(poi.point, rs); }); }); local.search(_this); } } //搜索地址并赋值给form $("#province,#city").change(function() { deletePoint(); _area.init(); }); //全局变量：存储address字符串长度做判断 var _thisLength = \'\'; $("#address").keydown(function() { _thisLength = $(this).val().length; // console.log(\'鼠标按下之前：\' + _thisLength); }) $("#address").keyup(function() { var _newLength = $(this).val().length; // console.log(\'鼠标按下之后：\' + _thisLength); var timer = setTimeout(function() { if(_thisLength <= _newLength) { deletePoint(); _area.init(); } else { clearTimeout(timer); } }, 1000); }) $("#address").blur(function() { deletePoint(); _area.init(); }) //搜索 $("#btn").click(function() { //循环数据 var html = \'\'; for(let j = 0; j < result.length; j++) { var es = result[j]; console.log(es.province) console.log($(\'#province\').val()) //判断是否是中国 if($(\'#province\').val() !== \'中国\') { if($(\'#province\').val() == es.province) { // var html = \'\'; html += `<li>${es.name}/${es.dianhua}</li>`; $("#initData").html(html) } } else { if($(\'#city\').val() == es.areaLists) { html += `<li>${es.name}/${es.dianhua}</li>`; $("#initData").html(html) } } } }) </script>
area.js
/* * 联动 js版 */ function Dsy() { this.Items = {}; } Dsy.prototype.add = function(id, iArray) { this.Items[id] = iArray; // console.log(this.Items[id]) } Dsy.prototype.Exists = function(id) { if(typeof(this.Items[id]) == "undefined") return false; return true; } function change(v) { var str = "0"; for(var i = 0; i < v; i++) { str += ("_" + (document.getElementById(s[i]).selectedIndex - 1)); }; var ss = document.getElementById(s[v]); with(ss) { length = 0; options[0] = new Option(opt0[v], opt0[v]); if(v && document.getElementById(s[v - 1]).selectedIndex > 0 || !v) { if(dsy.Exists(str)) { ar = dsy.Items[str]; for(var i = 0; i < ar.length; i++) { options[length] = new Option(ar[i], ar[i]); } //end for if(v) { options[0].selected = true; } } } //end if v if(++v < s.length) { change(v); } } //End with } var dsy = new Dsy(); dsy.add("0_0", ["北京市", "天津市", "上海市", "重庆市", "河北省", "山西省", "内蒙古", "辽宁省", "吉林省", "黑龙江省", "江苏省", "浙江省", "安徽省", "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "广西", "海南省", "四川省", "贵州省", "云南省", "西藏", "陕西省", "甘肃省", "青海省", "宁夏", "新疆", "香港", "澳门", "台湾省"]); dsy.add("0", ["中国", "阿尔巴尼亚", "阿尔及利亚", "阿富汗", "阿根廷", "阿拉伯联合酋长国", "阿鲁巴", "阿曼", "阿塞拜疆", "阿森松岛", "埃及", "埃塞俄比亚", "爱尔兰", "爱沙尼亚", "安道尔", "安哥拉", "安圭拉", "安提瓜岛和巴布达", "澳大利亚", "奥地利", "奥兰群岛", "巴巴多斯岛", "巴布亚新几内亚", "巴哈马", "巴基斯坦", "巴拉圭", "巴勒斯坦", "巴林", "巴拿马", "巴西", "白俄罗斯", "百慕大", "保加利亚", "北马里亚纳群岛", "贝宁", "比利时", "冰岛", "波多黎各", "波兰", "玻利维亚", "波斯尼亚和黑塞哥维那", "博茨瓦纳", "伯利兹", "不丹", "布基纳法索", "布隆迪", "布韦岛", "朝鲜", "丹麦", "德国", "东帝汶", "多哥", "多米尼加", "多米尼加共和国", "俄罗斯", "厄瓜多尔", "厄立特里亚", "法国", "法罗群岛", "法属波利尼西亚", "法属圭亚那", "法属南部领地", "梵蒂冈", "菲律宾", "斐济", "芬兰", "佛得角", "弗兰克群岛", "冈比亚", "刚果", "刚果民主共和国", "哥伦比亚", "哥斯达黎加", "格恩西岛", "格林纳达", "格陵兰", "古巴", "瓜德罗普", "关岛", "圭亚那", "哈萨克斯坦", "海地", "韩国", "荷兰", "荷属安地列斯", "赫德和麦克唐纳群岛", "洪都拉斯", "基里巴斯", "吉布提", "吉尔吉斯斯坦", "几内亚", "几内亚比绍", "加拿大", "加纳", "加蓬", "柬埔寨", "捷克共和国", "津巴布韦", "喀麦隆", "卡塔尔", "开曼群岛", "科科斯群岛", "科摩罗", "科特迪瓦", "科威特", "克罗地亚", "肯尼亚", "库克群岛", "拉脱维亚", "莱索托", "老挝", "黎巴嫩", "利比里亚", "利比亚", "立陶宛", "列支敦士登", "留尼旺岛", "卢森堡", "卢旺达", "罗马尼亚", "马达加斯加", "马尔代夫", "马耳他", "马拉维", "马来西亚", "马里", "马其顿", "马绍尔群岛", "马提尼克", "马约特岛", "曼岛", "毛里求斯", "毛里塔尼亚", "美国", "美属萨摩亚", "美属外岛", "蒙古", "蒙特塞拉特", "孟加拉", "密克罗尼西亚", "秘鲁", "缅甸", "摩尔多瓦", "摩洛哥", "摩纳哥", "莫桑比克", "墨西哥", "纳米比亚", "南非", "南极洲", "南乔治亚和南桑德威奇群岛", "瑙鲁", "尼泊尔", "尼加拉瓜", "尼日尔", "尼日利亚", "纽埃", "挪威", "诺福克", "帕劳群岛", "皮特凯恩", "葡萄牙", "乔治亚", "日本", "瑞典", "瑞士", "萨尔瓦多", "萨摩亚", "塞尔维亚,黑山", "塞拉利昂", "塞内加尔", "塞浦路斯", "塞舌尔", "沙特阿拉伯", "圣诞岛", "圣多美和普林西比", "圣赫勒拿", "圣基茨和尼维斯", "圣卢西亚", "圣马力诺", "圣皮埃尔和米克隆群岛", "圣文森特和格林纳丁斯", "斯里兰卡", "斯洛伐克", "斯洛文尼亚", "斯瓦尔巴和扬马廷", "斯威士兰", "苏丹", "苏里南", "所罗门群岛", "索马里", "塔吉克斯坦", "泰国", "坦桑尼亚", "汤加", "特克斯和凯克特斯群岛", "特里斯坦达昆哈", "特立尼达和多巴哥", "突尼斯", "图瓦卢", "土耳其", "土库曼斯坦", "托克劳", "瓦利斯和福图纳", "瓦努阿图", "危地马拉", "维尔京群岛，美属", "维尔京群岛，英属", "委内瑞拉", "文莱", "乌干达", "乌克兰", "乌拉圭", "乌兹别克斯坦", "西班牙", "希腊", "新加坡", "新喀里多尼亚", "新西兰", "匈牙利", "叙利亚", "牙买加", "亚美尼亚", "也门", "伊拉克", "伊朗", "以色列", "意大利", "印度", "印度尼西亚", "英国", "英属印度洋领地", "约旦", "越南", "赞比亚", "泽西岛", "乍得", "直布罗陀", "智利", "中非共和国" ]); //三个select的name var s = ["province", "city", "county"]; //初始值 var opt0 = ["国家", "地级市", "市、县级市"]; //新增//初始化函数 function _init_area() { for(var i = 0; i < s.length - 1; i++) { document.getElementById(s[i]).onchange = new Function("change(" + (i + 1) + ")"); } change(0); } _init_area();
版权声明：本文为520yh原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。