Google 地图API Map()构造器详解
更新时间：2016年08月06日 16:49:31 投稿：lqh
本文主要介绍Google 地图API Map(),这里对Map()构造器的知识做了一下整理以及提供简单的代码示例,开发Google 地图应用的朋友可以参考下
地图 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 地图Map()构造器的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！
相关文章
这篇文章主要为大家介绍了停止编写API函数的原因及示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了JavaScript异步操作中串行和并行，主要内容是写一下js中es5和es6针对异步函数，串行执行和并行执行的方案。已经串行和并行结合使用的例子。,需要的朋友可以参考一下2021-11-11
这篇文章主要为大家介绍了js二进制数据及其互相转化实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了JavaScript的function函数详细,而我们的JavaScript脚本语言比较特殊,相对于C语言,它的参数是不需要数据类型加持的。返回值return,我就不过多描述，他是和 C语言通的，如果没写他就会自动返回undefined,下面一起来看看文章内容,需要的朋友可以参考一下2021-11-11
JavaScript 数组用于在单一变量中存储多个值，数组是一种特殊的变量，它能够一次存放一个以上的值。下面文章小编就来详细归纳一下JavaScript数组,需要的朋友可以参考一下2021-09-09
这篇文章主要给大家分享JS创建对象的四种方式，分别是字面量的方式去创建对象、使用new字符创建对象、自定义构造函数、工厂模式创建对象，更多详细内容，请参考下面文章的具体内容2021-11-11
这篇文章主要介绍了微信小程序遇到修改数据后页面不渲染的问题解决的相关资料,需要的朋友可以参考下2017-03-03
这篇文章主要为大家介绍了open 打开浏览器的过程原理示例解析，2022-12-12
有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
这篇文章主要为大家介绍了webpack5之devServer的常用配置详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要为大家介绍了JS前端轻量fabric.js系列之画布初始化示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最新评论