栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

缘由:

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

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

实现步骤:

1.省市区三级联动(ps:已经忘记这个小插件的出处的)

引入area.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上一篇  微信小程序中的swiper组件详解
 

下一篇 angularjs实现首页轮播图效果

我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号