菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Google Maps 参考


Map() 构造函数

示例

创建 Google 地图

var map = new google.maps.Map(mapCanvas, mapOptions);

定义和用法

Map() 构造函数在指定的 HTML 元素(通常是 <div> 元素)中创建一个新地图。


语法

new google.maps.Map(HTMLElement,MapOptions)

参数值

参数 描述
HTMLElement 指定在哪个 HTML 元素中放置地图
MapOptions 一个 MapOptions 对象,其中包含地图初始化变量/选项

Map() 的方法

方法 返回值 描述
fitBounds(LatLngBounds) 将视口设置为包含给定的边界
getBounds() LatLng,LatLng 返回当前视口的西南纬度/经度和东北纬度/经度
getCenter() LatLng 返回地图中心的纬度/经度
getDiv() 节点 返回包含地图的 DOM 对象
getHeading() 数字 返回航片(对于 SATELLITE 和 HYBRID 地图类型)的罗盘航向
getMapTypeId() HYBRID
ROADMAP
SATELLITE
TERRAIN
返回当前地图类型
getProjection() Projection 返回当前投影
getStreetView() StreetViewPanorama 返回绑定到地图的默认 StreetViewPanorama
getTilt() 数字 返回航片(对于 SATELLITE 和 HYBRID 地图类型)的入射角(以度为单位)
getZoom() 数字 返回地图的当前缩放级别
panBy(xnumber,ynumber) 将地图中心按给定的像素距离进行更改
panTo(LatLng) 将地图中心更改为给定的 LatLng
panToBounds(LatLngBounds) 通过最小必要量平移地图,以包含给定的 LatLngBounds
setCenter(LatLng) 设置地图中心的纬度/经度
setHeading(number) 设置航片罗盘航向,以度为单位,从正北方向测量
setMapTypeId(MapTypeId) 设置要显示的地图类型
setOptions(MapOptions)  
setStreetView(StreetViewPanorama) 将 StreetViewPanorama 绑定到地图
setTilt(number) 设置航片(对于 SATELLITE 和 HYBRID 地图类型)的入射角(以度为单位)
setZoom(number) 设置地图的缩放级别


Map() 的属性

属性 类型 描述
controls Array.<MVCArray.<Node>> 要附加到地图的其他控件
mapTypes MapTypeRegistry 按字符串 ID 注册的 MapType 实例
overlayMapTypes MVCArray.<MapType> 要叠加的其他地图类型

Map() 的事件

事件 参数 描述
bounds_changed 视口边界更改时触发
center_changed 地图中心属性更改时触发
click MouseEvent 用户点击地图时触发
dblclick MouseEvent 用户双击地图时触发
drag 用户拖动地图时反复触发
dragend 用户停止拖动地图时触发
dragstart 用户开始拖动地图时触发
heading_changed 地图航向属性更改时触发
idle 平移或缩放后地图空闲时触发
maptypeid_changed mapTypeId 属性更改时触发
mousemove MouseEvent 用户鼠标在地图容器上移动时触发
mouseout MouseEvent 用户鼠标移出地图容器时触发
mouseover MouseEvent 用户鼠标进入地图容器时触发
projection_changed 投影已更改时触发
resize 地图(div)大小更改时触发
rightclick MouseEvent 用户右键单击地图时触发
tilesloaded 可见图块已完成加载时触发
tilt_changed 地图倾斜属性更改时触发
zoom_changed 地图缩放属性更改时触发

叠加层

构造函数/对象 描述
Marker 创建一个标记。(注意:必须设置位置才能显示标记)
MarkerOptions 渲染标记的选项
MarkerImage 表示标记图标或阴影图像的结构
MarkerShape 定义标记形状,用于确定标记的可点击区域(类型和坐标)
Animation 指定可以对标记播放的动画(弹跳或下降)
InfoWindow 创建一个信息窗口
InfoWindowOptions 渲染信息窗口的选项
Polyline 创建一个折线(包含路径和描边样式)
PolylineOptions 渲染折线的选项
Polygon 创建一个多边形(包含路径和描边+填充样式)
PolygonOptions 渲染多边形的选项
Rectangle 创建一个矩形(包含边界和描边+填充样式)
RectangleOptions 渲染矩形的选项
圆形 创建一个圆(包含中心+半径和描边+填充样式)
CircleOptions 渲染圆的选项
GroundOverlay  
GroundOverlayOptions  
OverlayView  
MapPanes  
MapCanvasProjection  

活动

构造函数/对象 描述
MapsEventListener 它没有方法也没有构造函数。它的实例是从 addListener()、addDomListener() 返回的,并最终传回给 removeListener()。
事件 添加/移除/触发事件监听器
MouseEvent 从地图和叠加层的各种鼠标事件返回

控件

构造函数/对象 描述
MapTypeControlOptions 包含修改控件的选项(位置和样式)
MapTypeControlStyle 指定显示哪种地图控件(下拉菜单或按钮)
OverviewMapControlOptions 渲染概览地图控件的选项(打开或折叠)
PanControlOptions 渲染平移控件的选项(位置)
RotateControlOptions 渲染旋转控件的选项(位置)
ScaleControlOptions 渲染比例控件的选项(位置和样式)
ScaleControlStyle 指定显示哪种比例控件
StreetViewControlOptions 渲染街景小人图标控件的选项(位置)
ZoomControlOptions 渲染缩放控件的选项(位置和样式)
ZoomControlStyle 指定显示哪种缩放控件(大或小)
ControlPosition 指定控件在地图上的放置位置

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持