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


Posted in Javascript onAugust 06, 2016

地图 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.> 要附加到地图上的额外控件。
mapTypes MapTypeRegistry 按字符串 ID 划分的 MapType 实例的注册表。
overlayMapTypes MVCArray. 要叠加的额外地图类型。

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

Javascript 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
33种Javascript 表格排序控件收集
Dec 03 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
Google 地图API资料整理及详细介绍
Aug 06 #Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 #Javascript
Google 地图类型详解及示例代码
Aug 06 #Javascript
Google 地图控件集详解及实例代码
Aug 06 #Javascript
Google 地图事件实例讲解
Aug 06 #Javascript
Google 地图叠加层实例讲解
Aug 06 #Javascript
Google Maps基础及实例解析
Aug 06 #Javascript
You might like
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
JS date对象的减法处理实现代码
2010/12/28 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
python操作ie登陆土豆网的方法
2015/05/09 Python
Python遍历numpy数组的实例
2018/04/04 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
Numpy数组的广播机制的实现
2020/11/03 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
小学生秋游活动方案
2014/02/23 职场文书
海飞丝广告词
2014/03/20 职场文书
爱之链教学反思
2014/04/30 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
优秀团员个人总结
2015/02/26 职场文书
保卫工作个人总结
2015/03/03 职场文书
校长新学期寄语2016
2015/12/04 职场文书
CSS基础详解
2021/10/16 HTML / CSS
Python必备技巧之字符数据操作详解
2022/03/23 Python
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫
利用Java连接Hadoop进行编程
2022/06/28 Java/Android