distpicker.js 根据当前位置初始化select

学习参考的地址放在最醒目的地方： 

https://blog.csdn.net/idea_boy/article/details/58280076

百度官方实例：http://developer.baidu.com/map/jsdemo.htm#i7_2

　　　　　

最近在做一个H5的页面有一个区域的选择，用的是 distpicker.js，需要是要根据当前的位置动态的切换省市区。

解决方法：参考百度地图API实例

首先根据浏览器定位拿到当前的经纬度

然后再根据当前的经纬度组合百度API的逆地址解析

然后再初始化distpicker的时候动态赋值即可。

贴出源码：

html:

          <div data-toggle="distpicker" class="mainX">
                <div>区域：</div>
                    <select id="province" name="province" data-province="福建省" disabled="true" ></select><!--省-->
                    <select data-city="莆田市" disabled="true"  name="city" id="city"></select><!--市-->
                    <select  name="area" id="area"></select><!--区-->
            </div>

JS：　　

$(function(){
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            alert('您的位置：'+r.point.lng+','+r.point.lat);
            var geoc = new BMap.Geocoder();
            geoc.getLocation(new BMap.Point(r.point.lng,r.point.lat), function(rs){
                var addComp = rs.addressComponents;
                alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
               
                $("#province").val(addComp.province);//省初始化
                $("#province").trigger("change");
                $("#city").val(addComp.city);//市初始化
                $("#city").trigger("change");
                $("#area").val(addComp.district);//区
                $("#area").trigger("change");
            });
        }
        else {
            alert('failed'+this.getStatus());
        }
    },{enableHighAccuracy: true});


  
});