Google 地图API Map()构造器详解
作者:lqh 时间:2024-05-05 09:29:04
地图 API Map() 构造器
实例
创建一个 Google 地图:
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapOpt = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapOpt);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
定义和用法
Map() 构造器创建了一个新的地图并插入到指定的HTML元素中(<div> 元素)。
语法
new google.maps.Map(HTMLElement,MapOptions)
参数值
参数 | 描述 |
---|---|
HTMLElement | 规定要把地图放置在那个 HTML 元素中。 |
MapOptions | 带有地图初始化变量/选项的 MapOptions 对象。 |
Map()的方法
方法 | 返回值 | 描述 |
---|---|---|
fitBounds(LatLngBounds) | None | 设置要包含给定边界的视口。 |
getBounds() | LatLng,LatLng | 返回当前视口的西南纬度/经度和东北纬度/经度。 |
getCenter() | LatLng | 返回地图的中心的纬度/经度。 |
getDiv() | Node | 返回包含地图的 DOM 对象。 |
getHeading() | number | 返回航拍图像的罗盘航向(支持 SATELLITE 和 HYBRID 地图类型)。 |
getMapTypeId() | HYBRID ROADMAP SATELLITE TERRAIN | 返回当前地图类型。 |
getProjection() | Projection | 返回当前 Projection(投影)。 |
getStreetView() | StreetViewPanorama | 返回绑定到地图的默认的 StreetViewPanorama。 |
getTilt() | number | 返回航拍图像的入射角度数(支持 SATELLITE 和 HYBRID 地图类型)。 |
getZoom() | number | 返回地图的当前缩放级别。 |
panBy(xnumber,ynumber) | None | 通过以像素计的给定距离改变地图的中心。 |
panTo(LatLng) | None | 改变地图的中心为给定的 LatLng。 |
panToBounds(LatLngBounds) | None | 将地图平移所需的最小距离以包含给定的 LatLngBounds。 |
setCenter(LatLng) | None | |
setHeading(number) | None | 设置航拍图像的罗盘方向(以度为单位进行测量),基本方向为北方。 |
setMapTypeId(MapTypeId) | None | 改变要显示的地图类型。 |
setOptions(MapOptions) | None | |
setStreetView(StreetViewPanorama) | None | 绑定一个 StreetViewPanorama 到地图上。 |
setTilt(number) | None | 设置航拍图像的入射角度数(支持 SATELLITE 和 HYBRID 地图类型)。 |
setZoom(number) | None |
Map()的属性
属性 | 类型 | 描述 |
---|---|---|
controls | Array.<MVCArray.<Node>> | 要附加到地图上的额外控件。 |
mapTypes | MapTypeRegistry | 按字符串 ID 划分的 MapType 实例的注册表。 |
overlayMapTypes | MVCArray.<MapType> | 要叠加的额外地图类型。 |
Map()的事件
事件 | 参数 | 描述 |
---|---|---|
bounds_changed | None | 当可视区域范围更改时会触发此事件。 |
center_changed | None | 当地图 center(中心)属性更改时会触发此事件。 |
click | MouseEvent | 当用户点击地图(但不是点击标记或信息窗口)时会触发此事件。 |
dblclick | MouseEvent | 当用户双击地图时会触发此事件。请注意,触发此事件前还会触发点击事件。 |
drag | None | 当用户拖动地图时会反复触发此事件。 |
dragend | None | 当用户停止拖动地图时会触发此事件。 |
dragstart | None | 当用户开始拖动地图时会触发此事件。 |
heading_changed | None | 当地图 heading(方向)属性更改时会触发此事件。 |
idle | None | 当地图在平移或缩放之后变为闲置状态时会触发此事件。 |
maptypeid_changed | None | 当 mapTypeId 属性更改时会触发此事件。 |
mousemove | MouseEvent | 只要用户的鼠标在地图容器上移动,就会触发此事件。 |
mouseout | MouseEvent | 当用户的鼠标从地图容器上退出时会触发此事件。 |
mouseover | MouseEvent | 当用户的鼠标进入地图容器时会触发此事件。 |
projection_changed | None | 当投影更改时会触发此事件。 |
resize | None | 当地图(div)更改尺寸时会触发此事件。 |
rightclick | MouseEvent | 当用户右击地图时会触发此事件。 |
tilesloaded | None | 当可见图块载入完成后会触发此事件。 |
tilt_changed | None | 当地图 tilt(倾斜)属性更改时会触发此事件。 |
zoom_changed | None | 当地图 zoom(缩放)属性更改时会触发此事件。 |
标签:Google,地图API,Map
0
投稿
猜你喜欢
Python实现时间序列可视化的方法
2021-03-07 20:42:00
Python+Pygame编写一个Pong游戏
2023-08-04 15:58:31
mysq启动失败问题及场景分析
2024-01-13 22:01:12
python发送邮件脚本
2022-01-28 03:04:58
Jupyter Notebook读取csv文件出现的问题及解决
2023-08-09 23:11:50
JavaScript的兼容性与调试技巧
2023-07-14 07:56:28
Python实现公历(阳历)转农历(阴历)的方法示例
2021-08-02 09:54:44
Python中Dataframe元素为不定长list时的拆分分组
2023-11-08 04:16:30
Python hashlib常见摘要算法详解
2023-07-29 20:04:09
用python记录运行pid,并在需要时kill掉它们的实例
2023-07-31 17:30:18
SQL2005 学习笔记 窗口函数(OVER)
2024-01-27 09:50:49
Vue自定义Form组件实现方法介绍
2024-04-28 09:21:14
深入理解vue中的slot与slot-scope
2024-05-05 09:07:18
ASP访问数量统计代码
2011-04-08 10:59:00
php替换字符串中间字符为省略号的方法
2023-09-30 20:16:04
mybatis plus generator 根据数据库自动生成实体类的实现示例
2024-01-25 11:48:00
python中py文件与pyc文件相互转换的方法实例
2021-03-29 13:15:27
python中查找excel某一列的重复数据 剔除之后打印
2022-10-27 06:34:00
如何使用Goland IDE go mod 方式构建项目
2024-02-23 00:36:40
Python数据分析Numpy中常用相关性函数
2022-03-26 08:25:34