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


Posted in Javascript onAugust 06, 2016

Google 地图类型

Google 地图- 基本地图类型

Google Maps API 中提供了以下地图类型:

1.MapTypeId.ROADMAP,用于显示默认的道路地图视图
2.MapTypeId.SATELLITE,用于显示 Google 地球卫星图片
3.MapTypeId.HYBRID,用于同时显示普通视图和卫星视图
4.MapTypeId.TERRAIN,用于根据地形信息显示实际地图。

要通过 Map 修改正在使用的地图类型,您可以为其设置 mapTypeId 属性:

var mapProp = {
 center:new google.maps.LatLng(51.508742,-0.120850),
 zoom:7,
 mapTypeId: google.maps.MapTypeId.HYBRID
};

或者动态修改 mapTypeId:

map.setMapTypeId(google.maps.MapTypeId.HYBRID);

Google 地图- 45° 图像

Google Maps API 针对特定位置支持特殊的 45° 图像。

此类高分辨率图像可提供朝向各基本方向(东南西北)的透视视图。对于支持的地图类型,这些图片还可提供更高的缩放级别。

现有的 google.maps.MapTypeId.SATELLITE 和 google.maps.MapTypeId.HYBRID 地图类型支持高缩放级别的 45° 透视图像(如果有的话)。如果您放大的位置拥有此类图像,那么这些地图类型将会自动通过以下方式更改其视图:

1.地图上现有的任何平移控件都将会变更为在现有的导航控件周围添加一个罗盘转轮。您可以通过该罗盘来更改任意 45° 图像的方向,方法是:拖动该罗盘转轮,然后将方向对准包含图像的最近支持方向。

2.一个旋转控件将会间隙显示在现有的平移和缩放控件之间,它可用于将图像围绕支持方向旋转。旋转控件仅支持顺时针方向旋转。

3.以当前位置为中心的 45° 透视图像将会替代卫星图像或混合图像。默认情况下,此类视图会朝向北方。如果您缩小地图,则地图会重新显示默认的卫星图像或混合图像。

4.MapType 控件将启用子菜单切换控件,用于显示 45° 图像。

注意:缩小显示 45° 图像的地图类型将会还原所有更改,并重新构建原始地图类型。

以下示例显示了意大利威尼斯公爵宫45°视图:

实例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(45.434046,12.340284);

function initialize()
{
var mapProp = {
 center:myCenter,
 zoom:18,
 mapTypeId:google.maps.MapTypeId.HYBRID
 };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

提示:Google 正在不断地为更多城市添加 45° 图像。有关最新信息,请参阅 Google 地图上的 45° 图像列表。

Google 地图 - 启用和停用 45° 图像 - setTilt(0)

您可以通过在 Map 对象上调用 setTilt(0) 来停用 45° 图像。要启用适用于支持的地图类型的 45° 透视图像,请调用 setTilt(45)。

实例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
​
<script>
var myCenter=new google.maps.LatLng(45.434046,12.340284);
​
function initialize()
{
var mapProp = {
 center:myCenter,
 zoom:18,
 mapTypeId:google.maps.MapTypeId.HYBRID
 };
​
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
map.setTilt(0);
}
​
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
​
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
​

以上就是对Google 地图类型的资料简单整理和讲解,希望能帮助开发Google地图的朋友,后续继续补充相关知识,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery简单实现验证邮箱格式
Jul 15 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
Google 地图控件集详解及实例代码
Aug 06 #Javascript
Google 地图事件实例讲解
Aug 06 #Javascript
Google 地图叠加层实例讲解
Aug 06 #Javascript
Google Maps基础及实例解析
Aug 06 #Javascript
浅谈js的html元素的父节点,子节点
Aug 06 #Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 #Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 #Javascript
You might like
从php核心代码分析require和include的区别
2011/01/02 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
JS 时间显示效果代码
2009/08/23 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
详解Django中的form库的使用
2015/07/18 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
详解Python自建logging模块
2018/01/29 Python
Python读写zip压缩文件的方法
2018/08/29 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
python实现粒子群算法
2020/10/15 Python
课前三分钟演讲稿
2014/04/24 职场文书
关于读书的演讲稿
2014/05/07 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
监守自盗观后感
2015/06/10 职场文书
孙振耀退休感言
2015/08/01 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
Golang数据类型和相互转换
2022/04/12 Golang