文档章节

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

o
 osc_1ee7cxmx
发布于 2018/08/06 16:58
字数 273
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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

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});


  
});    
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

JSON认识

JSON 阅读: 86328 JSON是JavaScript Object Notation的缩写,它是一种数据交换格式。 JSON实际上是JavaScript的一个子集。在JSON中,一共就这么几种数据类型: number:和JavaScript的numbe...

osc_4hvlwoqt
54分钟前
19
0
JavaScript基础

一、JavaScript基础 1.什么是JavaScript? JavaScript是运行在客户端的解释性脚本语言; 扩展: A.HTML、CSS、JavaScript都是在浏览器运行,所以称为客户端技术,会存在 浏览器兼容性; B.所有的编...

osc_afjz4qba
55分钟前
6
0
【融职培训】Web前端学习 第11章 微信开发1 微信开发概述

一、前言 微信为广大开发者提供了两个平台,分别是微信公众平台和微信开放平台。本节将简单概述这两个平台的基本功能。 二、微信公众平台 进入微信公众平台首页可以看到公众平台账号的分类,...

学习猿地
55分钟前
11
0
MySQL之视图、存储过程、触发器、函数、事务、动态执行SQL

视图 视图是一个虚拟表(非真实存在),其本质是【根据SQL语句获取动态的数据集,并为其命名】,用户使用时只需使用【名称】即可获取结果集,并可以将其当作表来使用。 创建视图: create v...

osc_idh31hqp
56分钟前
11
0
MySQL基础知识回顾

MarkdownPad Document MySQL MySQL:是用于管理文件的一个软件    - 服务端软件        - socket服务端        - 本地文件操作        - 解析指令【SQL...

osc_v1ao43h5
58分钟前
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部