百度地图定位得到当前位置（省、市、区县、街道、门派号码）

最新推荐文章于 2021-03-22 15:49:27 发布

原创最新推荐文章于 2021-03-22 15:49:27 发布 · 2w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图

本文详细介绍了如何使用百度地图API结合HTML和JavaScript实现基于IP定位的城市自动填充功能，包括代码实现、关键步骤解析以及注意事项。特别强调了在定位成功后如何在省份下拉列表中自动选中定位到的省份，并提供了解决定位延迟问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>测试定位</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4&ak=ia6HfFL660Bvh43exmH9LrI6"></script>
</head>
<body>

<script type="text/javascript" > 
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);    
}    
}); 
}
});
</script>
</body></html>

参考：http://developer.baidu.com/map/jsdevelop-8.htm

http://developer.baidu.com/map/reference/index.php?title=Class:%E6%9C%8D%E5%8A%A1%E7%B1%BB/AddressComponent

注意，上线需要自己申请一个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++;

}

</script>