地图状态

2024-07-13 06:24| 来源: 网络整理| 查看: 265

本文介绍设置、获取地图状态的常用方法，包括：

地图中心点和缩放级别根据覆盖物范围调整视野1、设置、获取地图中心点和级别 1.1 设置地图中心点setCenter()var position = new AMap.LngLat(116.681212,39.852698); //传入经纬度 //var position = [116.681212,39.852698]; //另一种写法 map.setCenter(position); //简写设置地图中心点 //map.setCenter(position, false, 2000); //另一种写法

setCenter(center, immediately, duration)方法有默认开启过渡动画效果，如果你想关闭动画或对动画有自定义需求，可以使用下面的参数：

center：地图中心点的位置坐标。

immediately：是否立即跳转到目标位置（设置为true，表示会立即跳转。为false时，则是在一段时间内平滑过渡到目标位置）。

duration：动画过渡时长，单位是毫秒（ms），这个参数可以用来控制动画过渡的速度（当immediately参数为false时，此参数才生效）。

1.2 获取地图中心点getCenter()var map = new AMap.Map("container", { center: [116.397686, 39.909154], //地图中心点 }); var currentCenter = map.getCenter().toJSON(); //获取地图中心点 console.log(currentCenter); //输出[116.397686, 39.909154]注意

getCenter()方法获取的是地图的实时中心点数据。由于setCenter()方法具有默认的过渡效果，因此如果在调用setCenter()方法后立即使用getCenter()方法来获取地图的中心点数据，可能不会得到预期的结果，因为地图可能还在进行中心点的过渡动画。为了解决这个问题，可以通过监听地图的moveend事件来获取地图中心点数据，这样就可以确保在地图中心点真正改变后再获取其数据。

var position = new AMap.LngLat(116.681212,39.852698); //传入经纬度 map.setCenter(position); //设置地图中心点 map.on("moveend", function () { var currentCenter = map.getCenter().toJSON(); //获取地图中心点 console.log(currentCenter); //输出[116.681212,39.852698] });1.3 设置地图缩放级别setZoom()//设置地图缩放级别，级别为数字。 map.setZoom(13); //参数 zoom 可设范围：[2 , 20]； //map.setZoom(13, false, 2000); //另一种写法

setZoom(zoom, immediately, duration)方法有默认开启过渡动画效果，如果你想关闭动画或对动画有自定义需求，可以使用下面的参数：

zoom：地图的缩放级别。

immediately：是否立即跳转到目标级别（设置为true，表示会立即跳转。为false时，则是在一段时间内平滑过渡到目标级别）。

duration：动画过渡时长，单位是毫秒（ms），这个参数可以用来控制动画过渡的速度（当immediately为false时，此参数才生效）。

1.4 获取地图缩放级别getZoom()var map = new AMap.Map("container", { zoom: 11, //地图级别 }); var currentZoom = map.getZoom(); //获取地图级别 console.log(currentZoom); //输出11注意

getZoom()方法获取的是地图的实时级别数据。由于getZoom()方法具有默认的过渡效果，因此如果在调用setZoom()方法后立即使用getZoom()方法来获取地图的级别，可能不会得到预期的结果，因为地图可能还在进行缩放的过渡动画。为了解决这个问题，可以通过监听地图的zoomend事件来获取地图级别数据，这样就可以确保在地图缩放级别真正改变后再获取其数据。

map.setZoom(13); //设置地图级别 map.on("zoomend", function () { var currentZoom = map.getZoom(); //获取地图级别 console.log(currentZoom); //输出13 });1.5 同时设置地图中心点和缩放级别setZoomAndCenter()//同时传入缩放级别和中心点经纬度 map.setZoomAndCenter(14, [116.205467, 39.907761]); //map.setZoomAndCenter(14, [116.205467, 39.907761], false, 2000); //另一种写法

setZoomAndCenter(zoom, center, immediately, duration)方法有默认开启过渡动画效果，如果你想关闭动画或对动画有自定义需求，可以使用下面的参数：

zoom：地图的缩放级别。

center：地图中心点的位置坐标。

immediately：是否立即跳转到目标级别和中心点坐标（设置为true，表示会立即跳转。为false时，则是在一段时间内平滑过渡到目标级别和中心点坐标）。

duration：动画过渡时长，单位是毫秒（ms），这个参数可以用来控制动画过渡的速度（当immediately为false时，此参数才生效）。

相关示例

2、根据覆盖物范围调整视野

根据地图上覆盖物分布情况，使用setFitView()方法自动缩放地图到合适的视野级别，以确保所有覆盖物都在视野范围内。

//创建一条折线覆盖物 var path = [ new AMap.LngLat("116.368904", "39.913423"), new AMap.LngLat("116.382122", "39.901176"), new AMap.LngLat("116.387271", "39.912501"), new AMap.LngLat("116.398258", "39.904600"), ]; var polyline = new AMap.Polyline({ path: path, borderWeight: 2, //线条宽度，默认为1 strokeColor: "red", //线条颜色 lineJoin: "round", //折线拐点连接处样式 }); map.add(polyline); //创建两个点标记 var marker1 = new AMap.Marker({ position: new AMap.LngLat(117.39, 39.9), //经纬度对象 }); var marker2 = new AMap.Marker({ position: new AMap.LngLat(118.39, 39.9), }); map.add(marker1); map.add(marker2); //自动适配到合适视野范围 //无参数，默认包括所有覆盖物的情况 map.setFitView(); //传入覆盖物数组，仅包括 polyline 和 marker1 在地图视野范围，marker2 不在地图视野范围 map.setFitView([polyline, marker1]); //简写 //map.setFitView([polyline, marker1], false, [60, 60, 60, 60], 12); //完整写法

setFitView(overlays, immediately, avoid, maxZoom)方法接收4个参数,参数均可缺省。

overlays：地图视野上展示的覆盖物。

immediately：是否需要动画过程。

avoid：上下左右的像素避让宽度。

maxZoom：地图的最大缩放级别。

查看AMap.Map全部参数

3、本章涉及的属性及方法说明3.1 AMap.Map

参数/方法

说明

类型

map.setCenter()

该方法传入参数时调用，为设置地图的中心点，忽略参数调用时返回值为当前地图的中心点信息

Function

map.getZoom()

该方法传入参数时调用，为设置地图的缩放级别，忽略参数调用时返回值为当前地图的缩放级别

Function

map.setZoomAndCenter()

地图缩放至指定级别并以指定点为地图显示中心点

Function

map.setFitView()

根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别，忽略参数时默认包括所有覆盖物

Function

查看所有AMap.Map属性和方法

【本文地址】

地图状态

地图状态

今日新闻

推荐新闻