近期,遇到一个根据定位获取省市区的需求,前期用了加载百度地图js的方式,经过实验,https在部分ios手机上都获取不到省市区。后来发现是百度地图API中getCurrentPosition方法提示错误。
现在的解决方案:先获取H5经纬度,获取到后调用高德地图接口的方式获取,如果失败,再去请求百度地图服务端api的方式。如果经纬度获取失败,则尝试加载高德地图js的方式。
把它封装起来:
getGeography() {
if (navigator.geolocation) { //H5获取经纬度
navigator.geolocation.getCurrentPosition(
function(position) {
var latitudes = position.coords.latitude; //获取纬度
var longitudes = position.coords.longitude; //获取经度
window.latitudes = position.coords.latitude; //获取纬度
window.longitudes = position.coords.longitude; //获取经度
getGaoDe(latitudes, longitudes) //获取到经纬度后,优先获取高德服务端api接口返回的省市县,如果失败,则用百度获取
function getGaoDe(latitudes, longitudes) { //首先获取高德接口返回的省市区
var loaction = longitudes + "," + latitudes;
$jQuery.ajax({
url: "https://restapi.amap.com/v3/geocode/regeo",
type: "GET",
cache: false,
dataType: "jsonp",
jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback: "success",
data: {
key: "高德地图申请的ak",
output: "json",
coordtype: "wgs84ll",
radius: "1000",
location: loaction,
extensions: "all",
},
dataType: "jsonp",
success: function(res) {
let data = res;
if (data.status == 1) {
let rest = data.regeocode;
console.log('经度:' + longitudes, '纬度:' + latitudes, '省:' + rest.addressComponent.province, '市:' + Array.prototype.isPrototypeOf(rest.addressComponent.city) &&
rest.addressComponent.city.length === 0 ?
rest.addressComponent.province :
rest.addressComponent.city, '区县:' + rest.addressComponent.district)
//这里注意一下,文档上描述的是如果是直辖市,市返回的是空
} else {//失败则调用百度地图
getBaiDu(latitudes, longitudes)
}
}.bind(this),
error: function(res) {
getBaiDu(latitudes, longitudes)
},
});
};
function getBaiDu(latitudes, longitudes) { //百度获取gps
var loaction = latitudes + ',' + longitudes
$jQuery.ajax({
url: "https://api.map.baidu.com/reverse_geocoding/v3/",
type: "GET",
cache: false,
dataType: "jsonp",
jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback: "success",
data: {
ak: "百度地图申请的ak",
output: "json",
coordtype: "wgs84ll",
location: decodeURIComponent(loaction),
},
dataType: "jsonp",
success: function(res) {
let data = res;
if (data.status == 0) {
let res_data = data.result;
console.log('经度:' + res_data.lng, '纬度:' + res_data.location.lat, '省:' + res_data.addressComponent.province, '市:' + res_data.addressComponent.city , '区县:' + res_data.addressComponent.district)
} else {
//失败
}
}.bind(this),
error: function(res) {
//失败
},
});
}
},
function(error) {
if (error.code == 1) {
window.isError = '位置服务被拒绝'
} else if (error.code == 2) {
window.isError = '暂时获取不到位置信息'
} else if (error.code == 3) {
window.isError = '获取信息超时'
} else if (error.code == 4) {
window.isError = '未知错误'
}
//加载高德地图的时候一定要引入js
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.0&key=你申请的key"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
这两段代码引入到html页面
//经纬度获取失败,加载高德地图获取
var map, geolocation;
//加载地图,调用浏览器定位服务
map = new AMap.Map("iCenter");
map.plugin("AMap.Geolocation", function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位,默认:true
timeout: 1000, //超过10秒后停止定位,默认:无穷大
maximumAge: 0, //定位结果缓存0毫秒,默认:0
convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
showButton: true, //显示定位按钮,默认:true
buttonPosition: "LB", //定位按钮停靠位置,默认:'LB',左下角
buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, "complete", onComplete); //返回定位信息
AMap.event.addListener(geolocation, "error", onError); //返回定位出错信息
});
//解析定位结果
function onComplete(data) {
console.log('经度:' + data.position.lng, '纬度:' + data.position.lat, '省:' + data.addressComponent.province, '市:' + (typeof data.addressComponent.city == "undefined" || data.addressComponent.city == null || data.addressComponent.city == "") ?
data.addressComponent.province :
data.addressComponent.city, '区县:' + data.addressComponent.district)
}
//解析定位错误信息
function onError(data) {
}
},
// {
// //指示浏览器获取高精度的位置,默认false
// enableHighAcuracy: true,
// //指定获取地理位置的超时时间,默认不限时,单位为毫秒
// // timeout: 5000,
// //最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置
// maximumAge: 1000
// }
);
}
},
因为只获取了省市区,没有精细到街道,没试过街道准确,自行参考