为了修复 Error: Invalid Object: LngLat(NaN, NaN)
错误并确保地图正确显示,需要仔细检查所有与经纬度相关的操作,确保所有经纬度数据都是有效的
1、确保在接收参数的时候他们都是有效的经纬度
2、初始化地图的时候,也需要确保 mapCenter
是有效的经纬度数据。如果无效,提供默认值
3、在所有创建 LngLat
对象的地方,确保数据有效性。
我的问题最后出在了 【初始化地图的时候】
更改前:
const initMap = () => {
AMapLoader.load({
key: "写自己的", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ["AMap.ToolBar", "AMap.MapType", "AMap.Geocoder"] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
})
.then(AMap => {
map = new AMap.Map("container", {
//设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 15, //初始化地图级别
center: mapCenter.value || [114.066182, 22.549351]
});
...............
更改后:
const initMap = () => {
AMapLoader.load({
key: "自己的", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ["AMap.ToolBar", "AMap.MapType", "AMap.Geocoder"] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
})
.then(AMap => {
map = new AMap.Map("container", {
//设置地图容器id
viewMode: "3D", //是否为3D地图模式
zoom: 15, //初始化地图级别
center: mapCenter.value && mapCenter.value.length === 2 && !isNaN(mapCenter.value[0]) && !isNaN(mapCenter.value[1]) ? mapCenter.value : [114.066182, 22.549351] //初始化地图中心点位置
});
// 其余代码...
})
.catch(e => {
console.log(e, "e");
});
};
改了之后就没报错了,也能正确显示定位的地图。问题解决!!!!
如果你的还不行:可以再看一下:1、确保在接收参数的时候他们都是有效的经纬度
const acceptParams = async (params: DrawerProps) => {
......
// 设置中心点的经纬度 浮点数
centerMarker.value = [parseFloat(params.row.locationCenterLongitude), parseFloat(params.row.locationCenterLatitude)];
console.log(centerMarker.value[0], "centerMarker");
// 将多边形的字符串形式解析成数组形式
lnglatArrMarker.value = params.row.polygon.split(";").map((item: any) => item.split(",").map(parseFloat));
console.log(lnglatArrMarker.value, "lnglatArrMarker");
}
initMap();
drawerVisible.value = true;
};
如果还是没有解决你的问题,可以根据文章开始的部分举出的三个点,来挨着进行判断检查