百度地图与 select下拉框的双向维护

最新推荐文章于 2022-10-31 20:38:05 发布

「已注销」

最新推荐文章于 2022-10-31 20:38:05 发布

阅读量3.1w

点赞数 2

分类专栏： WEB前端文章标签：百度地图 select

本文链接：https://blog.csdn.net/lee272616/article/details/50043199

版权

今天做了一款省市区select标签和百度地图之间双定位的模块, 给大家分享一下

前期准备: page.html(页面省市区select标签, 同时还隐藏了经纬度的input, 用于定位); area.js(初始化省市区数据, 维护change事件); jquery.js(jquery插件); map.html(百度地图)

PS: 重要提示, 测试的时候建议用IE浏览器, GOOGLE和OPERA等浏览器问题由于内核关系测试会失败, 如果部署到服务器上则浏览器问题可以无视, 详情参见本人另一篇文章~~http://blog.csdn.net/lee272616/article/details/49996639

反向维护

首先page.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>页面</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/area.js"></script>
</head>
<body>
	<select class="locSel" id="s_province_a"></select>
	<select class="locSel" id="s_city_a"></select>
	<select class="locSel" id="s_county_a"></select>
	<input  id="streetAndNum" type="text" placeholder="滨兴路301号" />
	<a href="javascript:void(0)" οnclick="window.open('map.html','_blank')">标注地图</a>
	<!-- 存放经度和维度 -->
	<input type="hidden" name="detailedLocal" id="f_lng" />
	<input type="hidden" name="detailedLocal" id="f_lat" />
</body>
</html>
<script type="text/javascript">
	var dsy4 = new Dsy();
    _create_dsy(dsy4);
    var opt0 = ["省份","地级市","市、县级市"];
    var s4=["s_province_a","s_city_a","s_county_a"];
    _init_area(dsy4, 'dsy4', s4, 's4', opt0);

    // 地图返回参数
	function mapResult(province,city,district,street,streetNumber,lng,lat){
		$("#streetAndNum").val(street+streetNumber);
		$("#f_lng").val(lng);
		$("#f_lat").val(lat);
		var opp = "option:contains('"+province+"')";
		var opc = "option:contains('"+city+"')";
		var opd = "option:contains('"+district+"')";
		$("#s_province_a").find(opp).attr("selected",true);
		// 初始化市
		change(dsy4,s4,1);
		$("#s_city_a").find(opc).attr("selected",true);
		// 初始化区
		change(dsy4,s4,2);
		$("#s_county_a").find(opd).attr("selected",true);
	}
	// 下拉框选择省市
	$(function(){
		$(".locSel").each(function(){
			$(this).change(function(){
				//选择了地点, 清空隐藏域
				$("#streetAndNum").val("");
				$("#f_lng").val("");
				$("#f_lat").val("");
				 if($(this).index() == 0){
					$("#f_province").val($(this).find("option:selected").text());
					$("#f_city").val("");
					$("#f_district").val("");
				}else if($(this).index() == 1){
					$("#f_city").val($(this).find("option:selected").text());
					$("#f_district").val("");
				}else {
					$("#f_district").val($(this).find("option:selected").text());
				} 
			});
		});
	}); 
</script>

map.html 其中******************部分，是需要自己申请一个百度开发者账号。详情可以参照这里：

http://developer.baidu.com/wiki/index.php?title=%E6%B3%A8%E5%86%8C%E6%88%90%E4%B8%BA%E5%BC%80%E5%8F%91%E8%80%85

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-family:"微软雅黑";}
		#allmap{width:100%;height:100%;}
		p{margin-left:5px; font-size:14px;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=************这里需要申请一个账号**************"></script>
	<title>地图单击事件</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
 	// 百度地图API功能
	var map = new BMap.Map("allmap");

	// 默认地图北京市 缩放比：13
	var point = new BMap.Point(116.331398,39.897445);
	map.centerAndZoom(point, 13);

	// 城市控件
	map.enableScrollWheelZoom();
	map.enableInertialDragging();
	
	map.enableContinuousZoom();
	var size = new BMap.Size(10, 20);
	map.addControl(new BMap.CityListControl({
	    anchor: BMAP_ANCHOR_TOP_LEFT,
	    offset: size,
	    // 切换城市之间事件
	    // onChangeBefore: function(){
	    //    alert('before');
	    // },
	    // 切换城市之后事件
	    // onChangeAfter:function(){
	    //   alert('after');
	    // }
	}));
	
	// 初始化位置
	var dlng = window.opener.document.getElementById("f_lng").value;
	var dlat = window.opener.document.getElementById("f_lat").value;
	
	var dcityp = window.opener.document.getElementById("s_city_a");
	var dcityidx = dcityp.selectedIndex; // 选中索引
	var dcity = dcityp.options[dcityidx].text; // 选中文本
	
	var ddistp = window.opener.document.getElementById("s_county_a");
	var ddisidx = ddistp.selectedIndex; // 选中索引
	var ddist = ddistp.options[ddisidx].text; // 选中文本
	if(dlng != "" && dlat != ""){
		// 经纬度定位
		map.clearOverlays(); 
		var new_point = new BMap.Point(dlng,dlat);
		var marker = new BMap.Marker(new_point);  // 创建标注
		map.addOverlay(marker);              // 将标注添加到地图中
		map.panTo(new_point);      
	}else if(ddist != "" && ddist != "市、县级市"){
		// 区域定位
		map.centerAndZoom(ddist,13);      // 用城市名设置地图中心点
	}else if(dcity != "" && dcity != "地级市"){
		// 城市定位
		map.centerAndZoom(dcity,13);      // 用城市名设置地图中心点
	}else{
		// 本地定位
		function myFun(result){
			map.setCenter(result.name);
		}
		var myCity = new BMap.LocalCity();
		myCity.get(myFun); 
	}
	
	// 点击事件信息处理
	var geoc = new BMap.Geocoder();
	map.addEventListener("click", function(e) {
		var pro = "";
		var pt = e.point;
		map.clearOverlays();
		map.addOverlay(new BMap.Marker(pt));
		geoc.getLocation(pt, function(rs){
			var addComp = rs.addressComponents;
			//alert(pt.lng + ", " + pt.lat + ", " + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
			window.opener.mapResult(addComp.province,addComp.city,addComp.district,addComp.street,addComp.streetNumber,pt.lng,pt.lat);
			window.close();
		});
	});
</script>

area.js

/*
*	全国三级城市联动 js版
*/
function Dsy(){
	this.Items = {};
}
Dsy.prototype.add = function(id,iArray){
	this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id){
	if(typeof(this.Items[id]) == "undefined") return false;
	return true;
}

function _create_dsy(dsy) {
    dsy.add('0',['01-北京市','02-天津市','03-河北省','04-山西省','05-内蒙古自治区','06-辽宁省','07-吉林省','08-黑龙江省','09-上海市','10-江苏省','11-浙江省','12-安徽省','13-福建省','14-江西省','15-山东省','16-河南省','17-湖北省','18-湖南省','19-广东省','20-广西壮族自治区','21-海南省','22-重庆市','23-四川省','24-贵州省','25-云南省','26-西藏自治区','27-陕西省','28-甘肃省','29-青海省','30-宁夏回族自治区','31-新疆维吾尔自治区','32-香港特别行政区','33-澳门特别行政区','34-台湾省']);
    dsy.add('0_0_0',['010101-东城区','010102-西城区','010103-崇文区','010104-宣武区','010105-朝阳区','010106-丰台区','010107-石景山区','010108-海淀区','010109-门头沟区','010110-房山区','010111-通州区','010112-顺义区','010113-昌平区','010114-大兴区','010115-怀柔区','010116-平谷区','010117-密云县','010118-延庆县']);
    dsy.add('0_0',['0101-北京市']);
    dsy.add('0_1_0',['020101-和平区','020102-河东区','020103-河西区','020104-南开区','020105-河北区','020106-红桥区','020107-塘沽区','020108-汉沽区','020109-大港区','020110-东丽区','020111-西青区','020112-津南区','020113-北辰区','020114-武清区','020115-宝坻区','020116-宁河县','020117-静海县','020118-蓟县']);
    dsy.add('0_1',['0201-天津市']);
    dsy.add('0_2_0',['030101-长安区','030102-桥东区','030103-桥西区','030104-新华区','030105-井陉矿区','030106-裕华区','030107-井陉县','030108-正定县','030109-栾城县','030110-行唐县','030111-灵寿县','030112-高邑县','030113-深泽县','030114-赞皇县','030115-无极县','030116-平山县','030117-元氏县','030118-赵县','030119-辛集市','030120-藁城市','030121-晋州市','030122-新乐市','030123-鹿泉市']);
    dsy.add('0_2_1',['030201-路南区','030202-路北区','030203-古冶区','030204-开平区','030205-丰南区','030206-丰润区','030207-滦县','030208-滦南县','030209-乐亭县','030210-迁西县','030211-玉田县','030212-唐海县','030213-遵化市','030214-迁安市']);
    dsy.add('0_2_2',['030301-海港区','030302-山海关区','030303-北戴河区','030304-青龙满族自治县','030305-昌黎县','030306-抚宁县','030307-卢龙县']);
    dsy.add('0_2_3',['030401-邯山区','030402-丛台区','030403-复兴区','030404-峰峰矿区','030405-邯郸县','030406-临漳县','030407-成安县','030408-大名县','030409-涉县','030410-磁县','030411-肥乡县','030412-永年县','030413-邱县','030414-鸡泽县','030415-广平县','030416-馆陶县','030417-魏县','030418-曲周县','030419-武安市']);
    dsy.add('0_2_4',['030501-桥东区','030502-桥西区','030503-邢台县','030504-临城县','030505-内丘县','030506-柏乡县','030507-隆尧县','030508-任县','030509-南和县','030510-宁晋县','030511-巨鹿县','030512-新河县','030513-广宗县','030514-平乡县','030515-威县','030516-清河县','030517-临西县','030518-南宫市','030519-沙河市']);
    dsy.add('0_2_5',['030601-新市区','030602-北市区','030603-南市区','030604-满城县','030605-清苑县','030606-涞水县','030607-阜平县','030608-徐水县','030609-定兴县','030610-唐县','030611-高阳县','030612-容城县','030613-涞源县','030614-望都县','030615-安新县','030616-易县','030617-曲阳县','030618-蠡县','030619-顺平县','030620-博野县','030621-雄县','030622-涿州市','030623-定州市','030624-安国市','030625-高碑店市']);
    dsy.add('0_2_6',['030701-桥东区','030702-桥西区','030703-宣化区','030704-下花园区','030705-宣化县','030706-张北县','030707-康保县','030708-沽源县','030709-尚义县','030710-蔚县','030711-阳原县','030712-怀安县','030713-万全县','030714-怀来县','030715-涿鹿县','030716-赤城县','030717-崇礼县']);
    dsy.add('0_2_7',['030801-双桥区','030802-双滦区','030803-鹰手营子矿区','030804-承德县','030805-兴隆县','030806-平泉县','030807-滦平县','030808-隆化县','030809-丰宁满族自治县','030810-宽城满族自治县','030811-围场满族蒙古族自治县']);
    dsy.add('0_2_8',['030901-新华区','030902-运河区','030903-沧县','030904-青县','030905-东光县','030906-海兴县','030907-盐山县','030908-肃宁县','030909-南皮县','030910-吴桥县','030911-献县','030912-孟村回族自治县','030913-泊头市','030914-任丘市','030915-黄骅市','030916-河间市']);
    dsy.add('0_2_9',['031001-安次区','031002-广阳区','031003-固安县','031004-永清县','031005-香河县','031006-大城县','031007-文安县','031008-大厂回族自治县','031009-霸州市','031010-三河市']);
    dsy.add('0_2_10',['031101-桃城区','031102-枣强县','031103-武邑县','031104-武强县','031105-饶阳县','031106-安平县','031107-故城县','031108-景县','031109-阜城县','031110-冀州市','031111-深州市']);
    dsy.add('0_2',['0301-石家庄市','0302-唐山市','0303-秦皇岛市','0304-邯郸市','0305-邢台市','0306-保定市','0307-张家口市','0308-承德市','0309-沧州市','0310-廊坊市','0311-衡水市']);
    dsy.add('0_3_0',['040101-小店区','040102-迎泽区','040103-杏花岭区','040104-尖草坪区','040105-万柏林区','040106-晋源区','040107-清徐县','040108-阳曲县','040109-娄烦县','040110-古交市']);
    dsy.add('0_3_1',['040201-城区','040202-矿区','040203-南郊区','040204-新荣区','040205-阳高县','040206-天镇县','040207-广灵县','040208-灵丘县','040209-浑源县','040210-左云县','040211-大同县']);
    dsy.add('0_3_2',['040301-城区','040302-矿区','040303-郊区','040304-平定县','040305-盂县']);
    dsy.add('0_3_3',['040401-城区','040402-郊区','040403-长治县','040404-襄垣县','040405-屯留县','040406-平顺县','040407-黎城县','040408-壶关县','040409-长子县','040410-武乡县','040411-沁县','040412-沁源县','040413-潞城市']);
    dsy.add('0_3_4',['040501-城区','040502-沁水县','040503-阳城县','040504-陵川县','040505-泽州县','040506-高平市']);
    dsy.add('0_3_5',['040601-朔城区','040602-平鲁区','040603-山阴县','040604-应县','040605-右玉县','040606-怀仁县']);
    dsy.add('0_3_6',['040701-榆次区','040702-榆社县','040703-左权县','040704-和顺县','040705-昔阳县','040706-寿阳县','040707-太谷县','040708-祁县','040709-平遥县','040710-灵石县','040711-介休市']);
    dsy.add('0_3_7',['040801-盐湖区','040802-临猗县','040803-万荣县','040804-闻喜县','040805-稷山县','040806-新绛县','040807-绛县','040808-垣曲县','040809-夏县','040810-平陆县','040811-芮城县','040812-永济市','040813-河津市']);
    dsy.add('0_3_8',['040901-忻府区','040902-定襄县','040903-五台县','040904-代县','040905-繁峙县','040906-宁武县','040907-静乐县','040908-神池县','040909-五寨县','040910-岢岚县','040911-河曲县','040912-保德县','040913-偏关县','040914-原平市']);
    dsy.add('0_3_9',['041001-尧都区','041002-曲沃县','041003-翼城县','041004-襄汾县','041005-洪洞县','041006-古县','041007-安泽县','041008-浮山县','041009-吉县','041010-乡宁县','041011-大宁县','041012-隰县','041013-永和县','041014-蒲县','041015-汾西县','041016-侯马市','041017-霍州市']);
    dsy.add('0_3_10',['041101-离石区','041102-文水县','041103-交城县','041104-兴县','041105-临县','041106-柳林县','041107-石楼县','041108-岚县','041109-方山县','041110-中阳县','041111-交口县','041112-孝义市','041113-汾阳市']);
    dsy.add('0_3',['0401-太原市','0402-大同市','0403-阳泉市','0404-长治市','0405-晋城市','0406-朔州市','0407-晋中市','0408-运城市','0409-忻州市','0410-临汾市','0411-吕梁市']);
    dsy.add('0_4_0',['050101-新城区','050102-回民区','050103-玉泉区','050104-赛罕区','050105-土默特左旗','050106-托克托县','050107-和林格尔县','050108-清水河县','050109-武川县']);
    dsy.add('0_4_1',['050201-东河区','050202-昆都仑区','050203-青山区','050204-石拐区','050205-白云矿区','050206-九原区','050207-土默特右旗','050208-固阳县','050209-达尔罕茂明安联合旗']);
    dsy.add('0_4_2',['050301-海勃湾区','050302-海南区','050303-乌达区']);
    dsy.add('0_4_3',['050401-红山区','050402-元宝山区','050403-松山区','050404-阿鲁科尔沁旗','050405-巴林左旗','050406-巴林右旗','05040

最低0.47元/天解锁文章

「已注销」

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
百度地图与 select下拉框的双向维护

今天做了一款省市区select标签和百度地图之间双定位的模块, 给大家分享一下前期准备: page.html(页面省市区select标签, 同时还隐藏了经纬度的input, 用于定位); area.js(初始化省市区数据, 维护change事件); jquery.js(jquery插件); map.html(百度地图)首先page.html 页
复制链接

扫一扫