地图功能笔记

68 阅读5分钟

一。new google.maps.Map API主要功能如下

1.center: 地图的中心点坐标

这个参数接受一个包含经度和纬度的对象作为值

eg1:center:{ lat: 37.774929, lng: -122.419416 }

这个值表示地图的中心点坐标为纬度37.774929,经度-122.419416,将地图的中心定位在这个位置上。

eg2:center: "Golden Gate Bridge, San Francisco"

center 参数还可以接受其他形式的值,比如字符串形式的地点名称或地址。Google Maps JavaScript API 会尝试根据提供的地点名称或地址来自动解析并确定对应的地理坐标作为地图的中心点

2.zoom: 地图的缩放级别

zoom 参数的值范围通常是从0到最大值(通常是22或更高,具体取决于地图范围)。一般来说,常见的缩放级别范围如下:

    0:整个世界地图

    1-4:大陆或国家级别

    5-8:省级别

    9-12:城市或市区级别

    13-16:街道级别

    17-20:建筑物级别

    21+:非常详细的地图信息

 

3.mapTypeId: 参数用于设置地图的类型,可以控制地图显示的样式

    常见的 mapTypeId 值包括:

    roadmap: 默认的路线地图样式

    satellite: 卫星图像样式

    terrain: 地形图样式

    hybrid: 卫星图像与地图标注的混合样式

   

4:disableDefaultUI: 是否禁用默认的地图 UI 控件

如果将 disableDefaultUI 设置为 true,则会隐藏默认的地图 UI 控件,如缩放控件、地图类型控件、街景控件等

 

5.zoomControl 是一个布尔类型的参数,用于控制是否显示缩放控件。

zoomControl 为true,则会在地图上显示默认的缩放控件,允许用户放大或缩小地图

zoomControl 为false,则会隐藏默认的缩放控件

6.mapTypeControl 是一个布尔类型的参数,用于控制是否显示地图类型控件。

mapTypeControl 设置为 true,则会在地图上显示默认的地图类型控件,允许用户切换地图的显示类型(如路线图、卫星图、地形图等)。

mapTypeControl 设置为 false,则会隐藏默认的地图类型控件。

7.streetViewControl: 是否显示街景控件

8.fullscreenControl: 是否显示全屏控件

9.styles: 自定义地图样

 

二。new google.maps.Polygon 是 Google Maps JavaScript API 中用于创建多边形对象的构造函数。

通过调用这个构造函数,可以在地图上绘制和管理多边形形状。

Polygon 对象具有一组方法和事件,用于操作和交互多边形。一些常用的方法和事件包括:

1.getPath(): 获取多边形的路径(顶点坐标)

    调用 getPath() 方法将返回一个 MVCArray 对象,其中包含多边形的顶点坐标信息。这些顶点坐标可以用于进行进一步的处理或修改多边形的形状。

2.setPath(path: MVCArray|Array): 设置多边形的路径

    将一个包含经纬度坐标的 MVCArray 对象或数组传递给 setPath 方法,以更新多边形的形状。

3.getMap(): 获取多边形所属的地图对象

4.setMap(map: Map): 设置多边形所属的地图对象

5.addListener(eventName: string, handler: function): 添加事件监听器

6.getPaths(): 获取多边形的路径组成

7.setOptions(options: PolygonOptions): 设置多边形的样式选项

8.google.maps.Polygon({  xxx:ccc ,yy:zz})

    在这个构造函数中,你可以传入一些配置选项来定义多边形的属性,例如设置多边形的路径、填充颜色、边框样式等。

   eg1:strokeWeight 是 google.maps.Polygon 对象的一个属性,用于设置多边形边框的宽度(线条的粗细)。

   通过设置 strokeWeight 属性,可以调整多边形边框的粗细程度,使边框线条显示更细或更粗。

   eg2:fillColor 是 oogle.maps.Polygon 对象的一个属性,用于设置多边形填充颜色。

 

三。google.maps.MVCArray 是 Google Maps JavaScript API 中的一个类,用于管理包含 MVC 模式的数组数据结构。

MVCArray 类通常用于管理地图元素的位置坐标、标记等数据,以实现数据与地图展示的同步更新。

1.insertAt 是 google.maps.MVCArray 类的一个方法,用于在指定位置插入新的元素到数组中。具体来说,

insertAt(index: number, elem: T) 方法接受两个参数:

index 表示要插入元素的位置,

elem 表示要插入的新元素。

2.removeAt(index: number) 用于从数组中移除指定位置的元素

调用 removeAt(index: number) 方法时,将会移除数组中索引为 index 的元素,并且其他元素将向前移动一个位置以填补被移除的位置。

3.setAt(index:number, elem:T)  ,用于设置数组中指定位置的元素值.

通过调用 setAt(index: number, elem: T) 方法,可以将数组中索引为 index 的元素设置为新的值 elem。

 

四。google.maps.Marker 是 Google Maps JavaScript API 中用于创建地图标记(marker)的类。

通过 google.maps.Marker,可以在地图上添加标记以标识特定位置或地点。一些常用的 google.maps.Marker API 包括:

google.maps.Marker ({    })

在大括号内填入相应的配置选项来定义标记的属性,例如设置标记的位置、图标、标题等。通过配置这些选项,可以创建具有特定属性的地图标记对象,并将其添加到地图上以标识特定位置或地点。

setPosition(latLng: LatLng): 设置标记的位置

setMap(map: Map): 将标记添加到地图上

setIcon(icon: string | Icon): 设置标记的图标

setTitle(title: string): 设置标记的标题

setDraggable(draggable: boolean): 设置标记是否可拖动

addListener(eventName: string, handler: function): 添加事件监听器

getPosition(): 获取标记的位置

setAnimation(animation: Animation): 设置标记的动画效果

setVisible(visible: boolean): 设置标记是否可见

 

五。google.maps.LatLng 是 Google Maps JavaScript API 中表示地理坐标(经纬度)的类。