JS开发中百度地图+城市联动实现实时触发查询地址功能

缘由：

由于项目需要实现一个根据省市区+详细地址的路径进行查询地址的功能。

所用技术：百度地图API+jQuery

实现步骤：

1.省市区三级联动（ps：已经忘记这个小插件的出处的）

引入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 change(v){
 var str="0";
 for(var i=0;i0 || !v){
   if(dsy.Exists(str)){
    ar = dsy.Items[str];
    for(var i=0;i 
 

2.引入百度地图API并实例化Map

//创建Map实例
 var map = new BMap.Map("map_container");
 //初始化广州坐标
 var point = new BMap.Point(113.270793, 23.135308);
 //地图平移缩放控件：默认左上方
 map.addControl(new BMap.NavigationControl());
 //比例尺控件，默认位于地图左下方，显示地图的比例关系
 map.addControl(new BMap.ScaleControl());
 map.centerAndZoom(point,11);
 //添加鼠标滚动缩放
 map.enableScrollWheelZoom(true);
 //设置标注的图标
 //var icon = new BMap.Icon("img/icon.jpg",new BMap.Size(100,100));
 //设置标注的经纬度
 var marker = new BMap.Marker(point);
 //把标注添加到地图上
 map.addOverlay(marker);
 //地址解析类
 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 deletePoint(){
  var allOverlay = map.getOverlays();
  for (var i = 0; i < allOverlay.length; i++){
   map.removeOverlay(allOverlay[i]);
  }
 }

3.根据省市区和用户输入地址进行查询地址前的必要判断和地址的拼接

//根据选择框或输入框获取地址
 var _area={
  //keyword:'',
  _areaLists:$(".areaLists"),
  _address:$("#address"),
  unChecked:function(val){
   return (val==''||typeof (val)=='undefined'||val==null||
   val=='省份'||val=='地级市'||val=='市、县级市')?false:true;
  },
  list:function(){
   //console.log(_areaLists.length);
   var _joinArea='';
   for(var i=0;i

以上所述是小编给大家介绍的JS开发中百度地图+城市联动实现实时触发查询地址功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！