缘由：
由于项目需要实现一个根据省市区+详细地址的路径进行查询地址的功能。
所用技术：百度地图API+jQuery
实现步骤：
1.省市区三级联动（ps：已经忘记这个小插件的出处的）
引入area.js
0 || !v){
if(dsy.Exists(str)){
ar = dsy.Items[str];
for(var i=0;i函数
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百度地图
var _this=_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);
}
}
总结：
完整demo
Meta charset="UTF-8">
省市区+<a href="https://www.jb51.cc/tag/baidu/" target="_blank" class="keywords">百度</a>API<a href="https://www.jb51.cc/tag/chaxun/" target="_blank" class="keywords">查询</a>地址
