html百度地图获取城镇街道,百度地图定位得到当前位置(省、市、区县、街道、门派号码)...

本文探讨了在JavaScript中如何结合百度地图API实现地理位置定位,并自动填充省份和城市到下拉列表中。通过定时器确保在定位成功后选中对应的省份,解决了定位与页面交互同步的问题。同时,还提及了IP定位作为备选方案,以增强用户体验。
摘要由CSDN通过智能技术生成
测试定位

var geolocation = new BMap.Geolocation();

// 创建地理编码实例

var myGeo = new BMap.Geocoder();

geolocation.getCurrentPosition(function(r){

if(this.getStatus() == BMAP_STATUS_SUCCESS){

var pt = r.point;

// 根据坐标得到地址描述

myGeo.getLocation(pt, function(result){

if (result){

var addComp = result.addressComponents;

alert(addComp.province + "," + addComp.city);

}

});

}

});

注意,上线需要自己申请一个key

不得不提一点,在我的代码中,我将定位的代码写在省份下拉列表的onchange代码之前,导致省份没法定位,但是我选择了省份后,可以自动带出当前城市。

代码如下:

var geolocation = new BMap.Geolocation();

// 创建地理编码实例

var myGeo = new BMap.Geocoder();

geolocation.getCurrentPosition(function(r){

if(this.getStatus() == BMAP_STATUS_SUCCESS){

var pt = r.point;

// 根据坐标得到地址描述

myGeo.getLocation(pt, function(result){

if (result){

var addComp = result.addressComponents;

province = addComp.province;

city = addComp.city;

// 选中自动定位到的省份,城市在省份下拉列表Onchange事件中增加

$("select[name='provinceCode'] option").each(function(i,v) {

if ($(this).text().indexOf(province) != -1) {

$(this).attr("selected","selected");

$(this).parent().trigger("change");

}

});

}

});

}

});

这里是provinceCode的onchange事件的代码。

就算是将定位到的省份选中的代码写到定位的代码后面,依然很可能省份选中不到。因为可能在定位的时候,代码已经执行完毕了。因此最好是将一定的时间之后,在省份下拉列表中选中定位到的省份,如setTimeout。或者每隔一定的时间自动执行某个方法,在这个方法中判断是否定位到的省份和城市,定位到了则选中。

当然,如果在代码执行的过程中发现用户已经选择了省份,则不用再选中了。

我用的setInterval,如下:

var intflag = setInterval("setLocation()",500);

// 最大循环20次

var maxLoopCount = 20;

var loopCount = 0;

function setLocation() {

// 定位超过10S不再定位

if (loopCount == maxLoopCount) {

console.debug("ip locate..");

var p = $("select[name='provinceCode'] option:selected");

if (!p.val().isEmpty()) {

intflag = clearInterval(intflag);

return;

}

// 根据IP定位

$.ajax({

url: 'http://api.map.baidu.com/location/ip?ak=ia6HfFL660Bvh43exmH9LrI6',

type: 'POST',

dataType: 'jsonp',

success:function(data) {

province = data.content.address_detail.province;

city     = data.content.address_detail.city;

console.debug("province:" + province);

console.debug("city:" + city);

$("select[name='provinceCode'] option").each(function(i,v) {

if ($(this).text().indexOf(province) != -1) {

$(this).attr("selected","selected");

$(this).parent().trigger("change");

//alert("IP定位:" + province);

}

});

}

});

}

else if (loopCount > maxLoopCount){

intflag = clearInterval(intflag);

return;

}

if (province != undefined && !province.isEmpty()) {

// 如果在定位到省份和城市的时候,用户已经选择了省份,则不定位

var p = $("select[name='provinceCode'] option:selected");

if (!p.val().isEmpty()) {

intflag = clearInterval(intflag);

return;

}

$("select[name='provinceCode'] option").each(function(i,v) {

if ($(this).text().indexOf(province) != -1) {

$(this).attr("selected","selected");

$(this).parent().trigger("change");

//alert("地图定位:" + province);

}

});

intflag = clearInterval(intflag);

}

else {

loopCount++;

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值