javascript 之获取 百度地址参数方法

原生态的JavaScript对DOM的操作 比jquery更方便,特别是当没有id  或class 可以获取的时候,只有用tag名获取

HTML DOM Element 对象操作  http://www.w3school.com.cn/jsref/dom_obj_all.asp

百度开放平台 :http://lbsyun.baidu.com/index.php?title=open/library&qq-pf-to=pcqq.group

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
    #container{
        font-size:12px;
        margin:5px 0;
    }
</style>
<title>
城市列表显示示例</title>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.4/src/CityList_min.js"></script>


</head>
<body>
<div id="container"></div>
<div style="width:520px;height:340px;border:1px solid gray" id="map_container"></div>

<button type="button" οnclick="data()">show</button>
<button type="button" οnclick="addArea()">addArea</button>
<button type="button" οnclick="delArea()">delArea</button>
<div id ='data'></div>
<div id="demo"></div>
</body>
</html>
<script type="text/javascript">
// 新创建地图
var map = new BMap.Map("map_container");
map.centerAndZoom(new BMap.Point(121.478125,31.229649), 12);

var cityList = new BMapLib.CityList({
    container: 'container',
    map: map
});

cityList.getBusiness('中关村', function(json){
    console.log('商圈');
    console.log(json);
});

cityList.getSubAreaList(131, function(json){
    console.log('城市列表');
    console.log(json);
    
});

cityList.addEventListener('cityclick', function(e){
    console.log(e);
});
/*
百度地址商圈采集脚本,目前是省和市选定后,选择区域,然后点addArea按钮就可以采集数据,因为第三个select选择后,
第四个select 的数据从百度上面调过来了,然后直接,用原生javascript采集就可以,
### 新想法是,绑定第三个select 的 change事件,选择一个就添加一次数据,这样就更快
*/
var j = 0;

function addArea(){

    this.j++;

    var k = document.getElementsByTagName('select')[2].childNodes[this.j];

    document.getElementById('data').innerHTML = k.value+k.text;

    //document.getElementById("demo").innerHTML = '';

    data();

}

function delArea(){

    this.j--;

    var xx = document.getElementsByTagName('select')[2].childNodes[this.j];

    document.getElementById('data').innerHTML = xx.value+xx.text;

    //document.getElementById("demo").innerHTML = '';

}


function data(){

    var b = document.getElementsByTagName('select')[2].childNodes[this.j];

    var c = document.getElementsByTagName('select')[3].childNodes;

    var txt ='';

    for (i=1; i<c.length; i++)
    {

            txt +='(\''+c[i].value +'\''+ ',' +'\''+c[i].text+'\''+','+'\''+b.value+'\''+'),'+'<br>';
       
    };
        var x=document.getElementById("demo");  

        x.innerHTML+=txt;

}



</script>

 

转载于:https://www.cnblogs.com/jerrypro/p/6565797.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值