1.最近接触一个项目,需要用到地图定位相关内容,使用第三方高德地图,一开始使用浏览器自带的api去请求获取经纬度,但是谷歌浏览器限制,包括用户授权,等问题,各种因素影响.
// 浏览器自带api获取位置
// async function getLocation() {
// try {
// if (navigator.geolocation) {
// navigator.geolocation.watchPosition(
// async (position) => {
// spinLoading.value = true;
// const latitude = position.coords.latitude;
// const longitude = position.coords.longitude;
// data.longitude = longitude;
// data.latitude = latitude;
// console.log("传参数据:", data);
// map.value.setCenter([longitude, latitude]);
// await getOverviewList();
// },
// (err) => {
// if (err.code == 1) {
// console.log("erro", err);
// spinLoading.value = false;
// getOverviewList();
// } else if (err.code == 2) {
// console.log("erro", err);
// message.error("请求超时");
// spinLoading.value = false;
// getOverviewList();
// }
// }
// );
// }
// } catch (error) {
// spinLoading.value = false;
// message.error("发生错误,请重试");
// }
// }
提示:也能实现,但是需要https协议,而且请求时间很长,要么你用梯子,还是不太合适.
2.如果只是获取城市,其实可以利用高德api去获取经纬度,可以优先使用精确定位(当前用户具体某一个位置),如果请求失败或者其他限制,可以考虑获取城市定位.
3.具体代码实现,相关配置,官方文档也有详细解释,主要核心代码
// 获取当前城市的经纬度
AMap.plugin("AMap.Geolocation", () => {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,
timeout: 5000,
zoomToAccuracy: true,
showButton: true,
buttonPosition: 'LB',
panToLocation: true,
GeoLocationFirst: true,
// noIpLocate: 2
});
//先获取用户当前的精确位置
geolocation.getCurrentPosition(async (status, result) => {
console.log("精确定位", result)
if (status == "complete") {
const longitude = (result.position.lng).toFixed(1);//经度
const latitude = (result.position.lat).toFixed(1);
data.longitude = longitude;
data.latitude = latitude;
console.log("经纬度:", longitude, latitude);
let position = new AMap.LngLat(longitude, latitude);
console.log(position, 'position');
// map.value.setCenter([longitude, latitude]);
map.value.setCenter(position);
// map.value.setZoomAndCenter(12, position);
await getOverviewList();
} else {
//再获取城市的经纬度
geolocation.getCityInfo(async (status, result) => {
if (status == "complete") {
console.log("城市定位", result)
const longitude = (result.position[0]).toFixed(1);//经度
const latitude = (result.position[1]).toFixed(1);
data.longitude = longitude;
data.latitude = latitude;
console.log("经纬度:", longitude, latitude);
let position = new AMap.LngLat(longitude, latitude);
console.log(position, 'position');
map.value.setCenter(position);
// map.value.setZoomAndCenter(12, position);
await getOverviewList();
}
})
}
})
})
4.具体地图完整代码,可以根据自己的需求进行修改
//地图方法
async function initMap() {
const AMap = await AMapLoader.load({
key: apiKey, // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
});
aMap.value = AMap; //用户获取地图maker
map.value = new AMap.Map("container", {
zoom: 10,
// center: [data.longitude, data.latitude],
});
map.value.on('zoomend', () => {
const zoom = map.value.getZoom(); // 获取当前缩放级别
// 判断是否为地图缩小(zoom值增大)
if (previousZoomLevel !== undefined && zoom < previousZoomLevel) {
if (zoom <= 13 && zoom >= 12) {
data.radius = "500";
} else if (zoom <= 12 && zoom >= 11) {
data.radius = "800";
} else if (zoom <= 11 && zoom >= 10) {
data.radius = "1000";
} else if (zoom <= 10 && zoom >= 9) {
data.radius = "1200";
} else if (zoom <= 9 && zoom >= 8) {
data.radius = "1500";
} else if (zoom <= 8 && zoom >= 7) {
data.radius = "2000";
} else if (zoom <= 7 && zoom >= 6) {
data.radius = "2200";
} else if (zoom <= 6 && zoom >= 5) {
data.radius = "2500";
} else if (zoom <= 5 && zoom >= 3) {
data.radius = "2800";
}
}
previousZoomLevel = zoom;
});
AMap.plugin("AMap.ToolBar", function () {
var opts = {
position: "RB", // 设置为右上角
};
var toolbar = new AMap.ToolBar(opts); // 工具条
map.value.addControl(toolbar);
});
AMap.plugin("AMap.Scale", function () {
var opts = {
position: "LT", // 设置为左上角
};
var Scale = new AMap.Scale(opts); //比例尺
map.value.addControl(Scale);
});
// 获取当前城市的经纬度
AMap.plugin("AMap.Geolocation", () => {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,
timeout: 5000,
zoomToAccuracy: true,
showButton: true,
buttonPosition: 'LB',
panToLocation: true,
GeoLocationFirst: true,
// noIpLocate: 2
});
//先获取用户当前的精确位置
geolocation.getCurrentPosition(async (status, result) => {
console.log("精确定位", result)
if (status == "complete") {
const longitude = (result.position.lng).toFixed(1);//经度
const latitude = (result.position.lat).toFixed(1);
data.longitude = longitude;
data.latitude = latitude;
console.log("经纬度:", longitude, latitude);
let position = new AMap.LngLat(longitude, latitude);
console.log(position, 'position');
// map.value.setCenter([longitude, latitude]);
map.value.setCenter(position);
// map.value.setZoomAndCenter(12, position);
await getOverviewList();
} else {
//再获取城市的经纬度
geolocation.getCityInfo(async (status, result) => {
if (status == "complete") {
console.log("城市定位", result)
const longitude = (result.position[0]).toFixed(1);//经度
const latitude = (result.position[1]).toFixed(1);
data.longitude = longitude;
data.latitude = latitude;
console.log("经纬度:", longitude, latitude);
let position = new AMap.LngLat(longitude, latitude);
console.log(position, 'position');
map.value.setCenter(position);
// map.value.setZoomAndCenter(12, position);
await getOverviewList();
}
})
}
})
})
}