vue 高德地图自定义覆盖物如何与地图的四个坐标绑定?

vue yekong

vue 高德地图自定义覆盖物如何与地图的四个坐标绑定?

要将自定义覆盖物与地图的四个坐标绑定,可以使用高德地图的 AMap.GroundImage 类。这个类用于添加一个只有一张图片的图层,图片会随缩放级别而自适应缩放。在构造 GroundImage 对象时,需要提供一个图片url,以及它覆盖的Bounds。图片会根据Bounds大小显示。Bounds就是你要绑定的四个坐标,它是一个矩形区域,由西南角和东北角的经纬度坐标确定。

以下是一个简单的示例:

var bounds = new AMap.Bounds([116.7,39.9], [117,40.2]); // 西南角经纬度 东北角经纬度值 设置图片覆盖的Bounds
var groundImage = new AMap.GroundImage('http://webapi.amap.com/images/0.png', bounds, {
    opacity: 0.7,
    clickable: true
});
map.add(groundImage); // 将覆盖物添加到地图上

在这个示例中,AMap.Bounds 的两个参数分别是西南角和东北角的经纬度坐标。AMap.GroundImage 的第一个参数是图片的url,第二个参数是图片覆盖的Bounds,第三个参数是一个选项对象,可以设置图片的透明度和是否可以点击等属性。最后,使用 map.add 方法将覆盖物添加到地图上。

AMap.GroundImage api介绍

AMap.GroundImage 是高德地图API中的一个类,用于在地图上添加一个只有一张图片的图层,图片会随缩放级别而自适应缩放。在构造 GroundImage 对象时,需要提供一个图片url,以及它覆盖的Bounds。

AMap.GroundImage 的构造函数如下:

new AMap.GroundImage(url, bounds, opts)

其中,url 是图片的URL,bounds 是图片覆盖的地理范围,opts 是一个可选的参数对象,可以包含以下属性:

  • map:要显示该groundimage的地图对象
  • clickable:图层是否可点击,若为可点击则GroundImage支持鼠标点击事件,默认值为false
  • opacity:图片透明度,取值范围[1],0表示完全透明,1表示不透明,默认值为1

AMap.GroundImage 还提供了一些方法,包括:

  • getMap():获取GroundImage的Map对象
  • setMap(map):设置显示GroundImage的Map对象
  • getOpacity():获取图片透明度值
  • setOpacity(opacity):设置图片透明度
  • getBounds():获取GroundImage的覆盖地理范围
  • getImageUrl():获取图片url

此外,AMap.GroundImage 还支持一些事件,包括:

  • click:鼠标左键单击事件
  • dblclick:鼠标左键双击事件。
喜欢