Google 地图API Map()构造器详解

地图 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()构造器的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 百度地图经纬度转换到腾讯地图/Google 对应的经纬度

    实现目的:将百度地图经纬度 转换到 腾讯地图/Google 对应的经纬度. 方法1:使用代码进行转换 存在的问题:转换之后误差大,基本不可用 public static void Convert_BD09_To_GCJ02(double lat, double lng) { double x_pi = Math. PI * 3000.0 / 180.0; double x = lng - 0.0065, y = lat - 0.006; double z = Math. sqrt(x * x +

  • Google 地图控件集详解及实例代码

    Google 地图控件集详解及实例代码

    Google 地图控件集 Google 地图 - 默认控件集设置: 当使用一个标准的google地图,它的默认设置如下: 1.Zoom-显示一个滑动条来控制map的Zoom级别 2.PPan-地图上显示的是一个平底碗样的控件,点击4个角平移地图 3.MapType-允许用户在map types(roadmap 和 satallite)之间切换 4.StreetView-显示为一个街景小人图标,可拖拽到地图上某个点来打开街景 Google 地图 - 更多控件集 除了以上默认控件集,Google还有

  • Google 地图获取API Key详细教程

    Google 地图获取API Key详细教程

    Google 地图API Key 开始学习本教程前,你需要拥有一个免费的 Google 地图 API key. 开始学习? 开始学习本教程前,你需要在Google上申请一个指定的API key. 通过以下步骤我们可以免费获取 API key . 访问 https://code.google.com/apis/console/, 使用你的Google账号登陆. 登陆后会出现如下界面: 点击 "Create Project" 按钮. 在服务列表中找到 Google Maps API v3,

  • Google Maps API地图应用示例分享

    Google Maps API地图应用示例分享

    效果(新版Firefox中测试): 代码: <!DOCTYPE><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Google Map</title> <script type="text/javascript" src="http://

  • 在Google 地图上实现做的标记相连接

    这里仅仅是将谷歌地图API的使用方法告诉大家,算是抛砖引玉吧,由于某些原因,谷歌已经远离大家了. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>GeoLocation</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta char

  • Google 地图叠加层实例讲解

    Google 地图叠加层实例讲解

    Google 地图 - 叠加层 叠加层是地图上绑定到经度/纬度坐标的对象,会随您拖动或缩放地图而移动. Google 地图 API 有如下几种叠加层: 1.地图上的点使用标记来显示,通常显示自定义图标.标记是 GMarker 类型的对象,并且可以利用 GIcon 类型的对象来自定义图标. 2.地图上的线使用折线(表示点的集合)来显示.线是类型为 GPolyline 的对象. 3.地图上的区域显示为多边形(如果是任意形状的区域)或底面叠加层(如果是矩形区域).多边形类似于闭合的折线,因此可以是任何

  • Google 地图API资料整理及详细介绍

    Google 地图API 参考手册 地图 构造函数/对象 描述 Map() 在指定的 HTML 容器中创建新的地图,该容器通常是一个DIV元素. 叠加层 构造函数/对象 描述 Marker 创建一个标记. MarkerOptions 标记的选项.由DirectionsRenderer渲染的所有标记都将使用这些选项. MarkerImage A structure representing a Marker icon or shadow image MarkerShape Defines the

  • js+html5获取用户地理位置信息并在Google地图上显示的方法

    本文实例讲述了js+html5获取用户地理位置信息并在Google地图上显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <p id="demo">Click the button to get your position:</p> <button onclick="getLocation()">Try It</button&

  • Google 地图类型详解及示例代码

    Google 地图类型 Google 地图- 基本地图类型 Google Maps API 中提供了以下地图类型: 1.MapTypeId.ROADMAP,用于显示默认的道路地图视图 2.MapTypeId.SATELLITE,用于显示 Google 地球卫星图片 3.MapTypeId.HYBRID,用于同时显示普通视图和卫星视图 4.MapTypeId.TERRAIN,用于根据地形信息显示实际地图. 要通过 Map 修改正在使用的地图类型,您可以为其设置 mapTypeId 属性: var

  • Google 地图事件实例讲解

    Google 地图事件 点击标记缩放地图 我们仍然使用上一遍文章使用的英国伦敦的地图. 点用户点击标记时实现缩放地图的功能(点击标记时绑定地图缩放事件). 代码如下: <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script>

随机推荐