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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
通过实例解析js简易模块加载器
Jun 17 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 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 md5下16位和32位的实现代码
2008/04/09 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
PHP小教程之实现链表
2014/06/09 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
js function定义函数使用心得
2010/04/15 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
Python实现配置文件备份的方法
2015/07/30 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
用python与文件进行交互的方法
2018/03/01 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
Python新手学习raise用法
2020/06/03 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
市场营销大学生职业规划书
2014/02/25 职场文书
家长对孩子的感言
2014/03/10 职场文书
医疗纠纷协议书
2014/04/16 职场文书
学校安全防火方案
2014/06/07 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript